使用Foreach和AfterAdd进行Knockoutjs动态模板绑定

时间:2012-10-06 00:35:29

标签: javascript templates dynamic binding knockout.js

我想要做的是动态模板绑定到observableArray,并带有指定“afterAdd”和“beforeRemove”的选项。通过查看我的代码可能更容易理解:

<div id="form_container" data-bind="template: {name: fnGetTemplate,
                                               foreach: OpenedForms(),
                                               beforeRemove: fnBeforeRemoveProcess(),
                                               afterAdd: fnAfterAddProcess()}"></div>

(simplfied version)OpenedForms = ko.observableArray()[{Template:'Template1'},{Template:'Template2}];

fnGetTemplate几乎接受数组元素并返回模板名称,例如“Template1”。

数组中的所有内容都会呈现;但问题是 fnAfterAddProcess // fnBeforeRemoveProcess fnGetTemplate 之前被调用。所以它实际上是在调用afterAdd和afterRemove之后渲染模板。我尝试用AfterRender替换afterAdd,但同样的事情发生了。出于某种原因,它实际上称为 fnBeforeRemoveProcess - &gt; fnAfterAddProcess - &gt;当我只向observableArray添加一个元素时, fnGetTemplate

但是,这项工作正常,但它不支持“beforeRemove”:

<div id="form_container" data-bind="foreach: {data: OpenedForms, afterRender: AfterAddProcess}">
    <div data-bind="template: {name: Template, data: $data}"></div>
</div>

也许我需要编写一个自定义绑定,但是如果有人可以指出我出错的地方,或者可能是解决问题的更好方法。

谢谢,

1 个答案:

答案 0 :(得分:0)

  

然而,问题是fnAfterAddProcess // fnBeforeRemoveProcess在fnGetTemplate之前被调用

那是因为你正在调用绑定中的函数,所以它们在解析绑定字符串时运行。您只需要在绑定中传递对该函数的引用:

<div id="form_container" data-bind="template: {name: fnGetTemplate,
                                               foreach: OpenedForms(),
                                               beforeRemove: fnBeforeRemoveProcess,
                                               afterAdd: fnAfterAddProcess}"></div>