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

我将尝试在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和IE9在今天有一个问题,因为它会导致异常.