javascript - Knockout.js afterAdd和afterRender问题

我正在使用一个简单的模板，其中包含一个{{each}}块。每当集合中发生任何更改时，整个模板都会重新呈现。

然后，我在模板绑定(bind)中附加了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}}中的块移动到独立模板，并使用模板绑定(bind)中的“foreach”选项对其进行调用。到目前为止，一切都很好，但是有一个要注意的地方:afterRender将不再起作用。我的输入内容不会引起关注。

我已经在互联网上读到了预期的行为，并改为使用afterAdd，但这也行不通。我的Prettify函数的效果始终添加到除最后添加的元素之外的所有元素。如果我再添加一个，则前一个会表现出来，依此类推。

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

谢谢。

最佳答案

我将尝试在https://github.com/SteveSanderson/knockout/tree/1.3上查看Beta中的 knockout 的新版本。它具有一些更简单的绑定(bind)方式，可能会更好地满足您的需求。 http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/上有新功能的文章。

我遇到了一些与您遇到的问题类似的问题，但是使用了新的控制流绑定(bind)，因为这样可以大大简化我的代码。见下文。

关于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到今天为止有问题，因为它将引起异常。

关于javascript - Knockout.js afterAdd和afterRender问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7488665/