CODEWITHSUNDEEP
javascriptknockout.js
awj
awj

Reputation: 7959

Knockout: afterRender not being called in a foreach template binding

I'm trying to use Knockout's afterRender binding, but the function that I reference is never called.

I have nested view-models: vmConcepts and vmConcept, where vmConcepts.Concepts = array of vmConcept objects.

vmConcept (the inner model) has a function self.Rendered = function (elmnt) {...

I bind vmConcepts (the outer model) to the following markup (you can see that this calls a nested template):

<ul>
    <!-- ko template: { name: 'concept-template', foreach: { data: Concepts, afterRender: Rendered } } --><!-- /ko -->
</ul>

My understanding is that this afterRender binding should be called for each vmConcept object (in vmConcepts.Concepts) passed to the concept-template template, but that doesn't happen. I've even added the same Rendered function to vmConcepts and that doesn't get hit either.

I've tried this as both a data-bind binding and as a virtual binding.

What am I missing?

Upvotes: 1

Views: 1461

Answers (1)

Thinking Sites
Thinking Sites

Reputation: 3542

Your bindings are messed up. The foreach inside template isn't the same as the foreach binding. The after rendered on the template will fire after every child.

Try this

<ul>
    <!-- ko template: { 
        name: 'concept-template', 
        foreach: Concepts, 
        afterRender: Rendered 
    } --><!-- /ko -->
</ul>

I have a working example here: http://jsfiddle.net/4t94G/1/

Upvotes: 2

Related Questions