在foreach绑定中knockoutjs afterRender功能

Question

我正在尝试使用knockoutjs foreach绑定指定插入元素的入口效果.设置非常简单:

myViewModel.myObservableArray.push({enter:function() { ... });

并在标记中:

foreach:{data:myObservableArray, afterRender:enter}

好像它应该工作......对吗？但它没有在项目上找到输入功能.我发现的确有效:

myViewModel.enter = function(something, item) { item.enter(); };

foreach:{data:myObservableArray, afterRender:$root.enter}

将enter函数添加到根视图模型并绑定afterRender到$ root.enter.然后输入作为其第二个参数传递该项目,因此可以依次调用项目的输入功能,但感觉就像一个黑客.

谁能解释一下这里发生了什么？

谢谢.

编辑:

澄清我创造了一个小提琴.

这样做非常简单,并且在动画过渡示例中有更深入的介绍.它在根视图模型中为使用foreach绑定插入的每个dom元素运行一个函数.

所以问题是:如果我想要特定于项目的afterRender,afterAdd或beforeRemove函数怎么办？我可以看到这很有用.特别是如果使用模板绑定来动态选择模板(注释4).这样做有干净的方法吗？现在我enter在视图模型的根目录中有一个函数,它只是调用enter项目上的函数,但就像我上面说的那样,感觉就像一个黑客.

Answer 1

不,这是它的设计方式.

来自文件:

注3:使用"afterRender","afterAdd"和"beforeRemove"

有时您可能希望在模板生成的DOM元素上运行自定义后处理逻辑.例如,如果您正在使用JavaScript小部件库(如jQuery UI),则可能需要拦截模板的输出,以便您可以在其上运行jQuery UI命令,以将某些呈现的元素转换为日期选择器,滑块或还要别的吗.

通常,对DOM元素执行此类后处理的最佳方法是编写自定义绑定,但如果您真的只想访问模板发出的原始DOM元素,则可以使用afterRender.

传递函数引用(函数文字,或在视图模型上给出函数的名称),Knockout将在渲染或重新渲染模板后立即调用它.

(强调我的)

正如它所说,自定义绑定是另一种方法,并且可能更好,具体取决于该enter()功能的作用.

Answer 2

在这种情况下,下划线去抖(_.debounce)是一个很好的解决方案.

模板

data-bind=" template: {foreach:myObservableArray, afterRender: runWhenAllRenderDone }

如果在最后100毫秒内没有触发afterRender,则会执行去抖功能.

var runWhenAllRenderDone = _.debounce(myFunction, 100);

function myFunction(){
    //do some task but do it for once only
}

不是很棒吗？