javascript 模板渲染后的 KnockoutJS 绑定事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9306177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
KnockoutJS bind event after template render
提问by farina
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.
基本上,我试图找出当使用 jQuery 模板之类的东西时,是否有 KnockoutJS 在模板渲染后创建的可订阅事件。
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.
我只想要一个在模板完成渲染后触发的事件。
回答by farina
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/QtZm2/1/(Using function style ViewModel)
http://jsfiddle.net/farina/kuFx2/1/(使用对象数组样式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!!
感谢丹的帮助!!
回答by Romanych
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?
是beforeRemove
您要找的吗?我不确定您想要实现什么行为。请查看此示例:http: //jsfiddle.net/romanych/YWfV8/8/这是您想要的还是不想要的?