Question

我正在使用一个简单的模板，其中包含{{each}}块。每当集合中的某些内容发生变化时，整个模板都会重新渲染。

然后我在模板绑定中附加了一个afterRender事件。调用的函数只是将焦点设置为新添加的输入元素。工作得很好。

{{each Fabbricati}}
<li>
    <div style="float: left; clear: left;">
        {{if Editing}}
        <input id="editingitem" type="text" data-bind="value: Name, event: { blur: function() { Editing(false) }, keypress: function(event) { if (event.which == 13) { blur() } return true; } }" />
        {{else}}
        <span data-bind="click: function() { Editing(true) }">${Name() || 'Senza nome'}</span>
        {{/if}}
        - <button class="fancybox edit" data-bind="click: function() { Edit(Id()) }">Modifica</button><button class="remove" data-bind="click: Remove">Rimuovi</button>
    </div>
</li>
{{/each}}

和调用div：

<div id="wrapper" data-bind="template: { name: 'navTemplate', afterRender: Prettify </div>

现在我尝试将{{each}}内的块移动到独立模板，并使用模板绑定中的“foreach”选项调用它。到目前为止一切都很好，但这里有一个问题：afterRender将不再适用。我的意见不会得到关注。

我已经在互联网上阅读了它的预期行为，并使用afterAdd代替，但这也不行。除了添加的最后一个元素之外，我的Prettify函数的效果总是被添加到所有元素中。如果我添加另一个，前一个获取行为，等等。

我真的被困住了。如果有人知道如何解决这个问题，那将是一个救生员。

感谢。

Answer 1

我会尝试在https://github.com/SteveSanderson/knockout/tree/1.3查看测试版的新版淘汰赛。它有一些不同的方法来进行更简单的绑定，可以更好地满足您的需求。 http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/上有新功能的撰写。

我遇到了一些与你的问题类似的问题，但是使用了新的控制流绑定，因为它能够简化我的代码。见下文。

关于afterRender：

<ul data-bind="foreach: products, afterRender: callback">
<li>
    <strong data-bind="text: name"></strong>
    &mdash;
    Last updated: <em data-bind="text: $parent.lastUpdated"></em>
</li>

这类似于我昨天运行的代码。我发现每次生成一行时都会调用afterRender。我认为这是你正在寻找的行为。 Knockout 1.3 Beta Note - afterRender＆amp;到目前为止，IE9存在问题，因为它会导致异常。

Answer 2

试试这个：

来自http://knockoutjs.com/documentation/template-binding.html

将{{each}}与可观察数组一起使用

使用{{each someArray}}时，如果您的值是observableArray， ，您必须通过编写{{each myObservableArray（）}} ，而不仅仅是{{each myObservableArray}}。

所以试试：

{{each Fabbricati()}}

knockoutjs afterAdd和afterRender问题

2 个答案: