KnockoutJS bind event after template render

核能气质少年 提交于 2019-12-18 14:48:32

问题


I've been searching for a while, and I'm pretty confident this is a new question, and not a repeat like the title suggests. :)

Basically, I'm trying to find out if there is a subscribe-able event that KnockoutJS creates after a template render when using something like jQuery templates.

I'd use the built-in "afterRender" but I found out that it doesn't fire if the observable array is cleared. I built this demo to illustrate that problem: http://jsfiddle.net/farina/YWfV8/1/.

Also, I'm aware that I could write a custom handler...but that seems really unnecessary for what I need.

I just want one event that fires after the template finishes rendering.


回答1:


My colleague actually solved this last night using something we were playing with before I went home.

So the whole "problem" with the events “afterRender”, “afterAdd”, and “beforeRemove” is that they act differently in conjunction with a "foreach" binding. KnockoutJS is nice enough to tell you this on their page, but for whatever reason it didn't actually sink in for me until I saw it in practice.

What really works is to scrap the whole "foreach" binding and use Knockout's native "data" bind like this:

data-bind="template: { name: 'item-template', data: items, afterRender: caller }"

Then "afterRender" works exactly as the name suggests.

I was under the impression that you couldn't iterate the collection and render new UI without foreach, but these examples illustrate that it does work.

  • http://jsfiddle.net/farina/kuFx2/1/ (Using object array style ViewModel)

  • http://jsfiddle.net/farina/QtZm2/1/ (Using function style ViewModel)

I made an example for both ViewModel styles because I sometimes need one or the other.

Thanks for the help Dan!!




回答2:


Is beforeRemove is what you are looking for? I am not sure what behaviour you want to achieve. Please checkout this sample: http://jsfiddle.net/romanych/YWfV8/8/ Is it what you want or not?



来源:https://stackoverflow.com/questions/9306177/knockoutjs-bind-event-after-template-render

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!