模板渲染后KnockoutJS绑定事件
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.
基本上,我正在尝试找出KnockoutJS在使用jQuery模板之类的模板渲染后创建的可订阅事件。
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/.
我会使用内置的“afterRender”,但我发现如果清除了可观察数组,它就不会触发。我构建了这个演示来说明这个问题: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.
我只想在模板完成渲染后触发一个事件。
2 个解决方案
#1
29
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.
因此事件“afterRender”,“afterAdd”和“beforeRemove”的整个“问题”是它们与“foreach”绑定一起表现不同。 KnockoutJS非常好,可以在他们的页面上告诉你这个,但无论出于何种原因它直到我在实践中看到它才真正沉入其中。
What really works is to scrap the whole "foreach" binding and use Knockout's native "data" bind like this:
真正有效的是废弃整个“foreach”绑定并使用Knockout的本地“数据”绑定,如下所示:
data-bind="template: { name: 'item-template', data: items, afterRender: caller }"
Then "afterRender" works exactly as the name suggests.
然后“afterRender”完全按照顾名思义工作。
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.
我的印象是你无法迭代集合并在没有foreach的情况下渲染新UI,但这些例子说明它确实有用。
http://jsfiddle.net/farina/kuFx2/1/ (Using object array style ViewModel)
http://jsfiddle.net/farina/kuFx2/1/(使用对象数组样式ViewModel)
http://jsfiddle.net/farina/QtZm2/1/ (Using function style ViewModel)
http://jsfiddle.net/farina/QtZm2/1/(使用函数样式ViewModel)
I made an example for both ViewModel styles because I sometimes need one or the other.
我为两个ViewModel样式做了一个例子,因为我有时需要一个或另一个。
Thanks for the help Dan!!
谢谢Dan的帮助!!
更多相关文章
- Javascript没有返回样式属性[重复]
- Vue绑定内联样式问题
- [Linux] 总结各系统 双网卡绑定
- linux socket 程序被ctrl+c或者异常终止,再次起程序时提示该端口
- 使用.NetCore在Linux上写TCP listen 重启后无法绑定地址
- PLSQL并非所有变量都已绑定
- 绑定本地Service和远程Service并调用其中方法
- Android中bindService的细节之二:从进程的角度分析绑定Service的
- jsp权限菜单绑定的基本实现