Question

I was working with a simply template, containing an {{each}} block. The whole template would get re-rendered every time something changed in the collection.

I then attached an afterRender event in the template binding. The function called would simply set the focus to the newly added input element. Working perfectly.

{{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}}

and the calling div:

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

Now I tried to move the block inside the {{each}} to a standalone template, and call it using the “foreach” option in the template binding. So far so good, but here’s the catch: afterRender won’t work anymore. My input won’t get the focus.

I already read around the internet that it is intended behaviour, and to use afterAdd instead, but this isn’t working too. The effects of my Prettify function are always added to all elements except the last one added. If I add another one, the previous gets the behaviour, etc.

I’m really stuck. If anyone knows how to fix this, it would be a life saver.

Thanks.

Answer 1

I would try taking a look at the new version of knockout in beta at https://github.com/SteveSanderson/knockout/tree/1.3. It has some different ways of doing the bindings that are simpler and may meet your needs better. There is a writeup of new features at http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/.

I had some issues similar to what your’re having, but used the new control flow bindings as was able to simplify my code a lot. See below.

With regards to 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>

This is similar to code I was running yesterday. I found that afterRender was called every time a row was generated. I think this is behavior you’re looking for. Knockout 1.3 Beta Note – afterRender & IE9 have an issue as of today as it will cause an exception.