Question

I am having trouble binding to elements created by a Knockout template triggered by an AJAX call in the afterRender event. As you can see in this Fiddle the results render properly but in the afterRender event handler the elements still aren’t available.

Questions…

• How is the template even rendering properly since it doesn’t appear to have rendered when the afterRender event handler runs?

• Why does the AJAX call affect the outcome? If you uncomment out the line above the AJAX call, the template elements are available in the afterRender event.

Here is the code…

HTML

<div id="plugin" data-bind="template: { name: 'fooTemplate', data: $data, afterRender: postProcess }"></div>
<br />
<br />
<hr />
<div id="results"></div>

<script type="text/html" id="fooTemplate">
    <div data-bind="foreach: items()">
        <span data-bind="text: displayText"></span>
    </div>
</script>

JAVASCRIPT

var data = {
    items: [{
        displayText: 'Name',
    }, {
        displayText: 'Last Login Date',
    }, {
        displayText: 'Email',
    }]
};

function DataModel() {
    var self = this;
    self.items = ko.observableArray([]);
    self.data = ko.dependentObservable(function () {
        //self.items(data.items);//   <<== UNCOMMENT THIS LINE AND THE postProcess FUNCTION SHOWS FULLY RENDERED DOM
        $.ajax({
            url: '/some/path',
            error: function () {
                self.items(data.items);
            }
        });
    });

    postProcess = function () {
        $('#results').text($('#plugin').html());
    }
}

dataModel = new DataModel();
ko.applyBindings(dataModel);

One note…the fiddle makes an AJAX call to a bogus address. This was so the Fiddle doesn’t have a server dependency. The error property is leveraged to change the data which causes the template to run. However, in my development environment calling a valid url yields the same outcome as displayed in the fiddle. Also, I am not using data returned from a server to load the template. Rather the fiddle uses a statically defined data source at the top (again just to demo the problem).

Answer 1

Looking at your example, you’re running into an async issue.

Here’s how the flow works without the $.ajax call:

1. The dependentObservable fires to update the value
2. The self.items gets updated with new values
3. The template renders
4. The postProcess method is called and everything looks fine.

But with the $.ajax call, the done (and error) methods are callbacks, so the flow changes:

1. The dependentObservable (use ko.computed instead!) fires to update the value
2. The $.ajax call is made to the server.
3. The done (or error) callback is queued up for when it’s complete.
4. The template renders
5. The postProcess method is called yet self.items is still empty.
6. The done callback fires now that the server responded and updates self.items
7. The rendered template is still bound to your viewmodel, so the rendered template is updated.

I think the easiest fix is to pull your ajax call out of your dependentObservable to allow the situation you have commented out.