Callback when WinJS bindings have been processed and rendered

Question

I'm using WinJS in a Cordova app. On a page, I have a WinJS.UI.ListView which gets bound to a view model.

In the page ready event handler, I bind the view model to the page by calling WinJS.Binding.processAll, which returns a Promise. However, when the success callback is fired, the elements haven't actually been rendered and the ListView is still empty (it does render if you just let it run on).

In this case I want to find the offset of a particular item in the list. The question is whether there is a way of actually being 'notified' when rendering the bound controls has completed.

<div id="rootElement">
    <div class="hidden" id="exerciseListTemplate" data-win-control="WinJS.Binding.Template">
        <div class="exercise">
            <span data-win-bind="textContent: name"></span>
        </div>
    </div>

    <div data-win-control="WinJS.UI.ListView" 
         data-win-options="{ itemTemplate: select('#exerciseListTemplate'), layout: { type: WinJS.UI.GridLayout } }"
         data-win-bind="winControl.itemDataSource: content.dataSource"
         class="exercise-list">
    </div>
</div>

JavaScript:

// view model (with data in real application)
_viewModel: { content: new WinJS.Binding.List() },

ready: function (element, options) {
    // bind view model to page
    WinJS.Binding.processAll(element, this._viewModel)
        .then(function () {
            // trying to access a list item will fail because
            // they haven't actually been rendered yet
            // e.g. $('.exercise-list .win-container').length returns 0
        });
}

Answer 1

You can pass a function as itemTemplate parameter which is invoked for each list element when it's about to be rendered. Inside this template function you can check whether it's the last element and then invoke some custom logic.

More details about template functions: https://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx