My colleague actually solved this last night using something we were playing with before I went home.

So the whole problem with the events “afterRender”, “afterAdd”, and “beforeRemove” is that they act differently in conjunction with a foreach binding. KnockoutJS is nice enough to tell you this on their page, but for whatever reason it didn't actually sink in for me until I saw it in practice.

What really works is to scrap the whole foreach binding and use Knockout's native data bind like this:

data-bind=template: { name: 'item-template', data: items, afterRender: caller }

Then afterRender works exactly as the name suggests.

I was under the impression that you couldn't iterate the collection and render new UI without foreach, but these examples illustrate that it does work.

• http://jsfiddle.net/farina/kuFx2/1/ (Using object array style ViewModel)




• http://jsfiddle.net/farina/QtZm2/1/ (Using function style ViewModel)

I made an example for both ViewModel styles because I sometimes need one or the other.

Thanks for the help Dan!!