knockoutjs afterAdd 和 afterRender 问题

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

试试这个：

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

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

使用 {{each someArray}} 时，如果您的值是 observableArray，您必须通过编写 {{each myObservableArray()}} 将底层数组传递给每个>，而不仅仅是 {{each myObservableArray}}。

那就试试吧：

{{each Fabbricati()}} 

Answer 2

我会尝试在https://github.com/SteveSanderson/knockout/tree/1.3 上查看新版本的 beta 淘汰赛。它有一些不同的方法来进行更简单的绑定，并且可以更好地满足您的需求。 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 注意 - afterRender 和 IE9 从今天开始就有问题，因为它会导致异常。