处理和渲染 WinJS 绑定时的回调答案

【问题标题】：Callback when WinJS bindings have been processed and rendered处理和渲染 WinJS 绑定时的回调
【发布时间】：2015-06-10 20:58:19
【问题描述】：

我在 Cordova 应用程序中使用 WinJS。在一个页面上，我有一个绑定到视图模型的WinJS.UI.ListView。

在页面ready 事件处理程序中，我通过调用WinJS.Binding.processAll 将视图模型绑定到页面，这将返回一个Promise。然而，当success 回调被触发时，元素实际上并没有被渲染并且ListView 仍然是空的（如果你让它运行它就会渲染）。

在这种情况下，我想找到列表中特定项目的偏移量。问题是是否有办法在渲染绑定控件完成时真正得到“通知”。

<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
        });
}

【问题讨论】：

标签： javascript winjs

【解决方案1】：

您可以将一个函数作为itemTemplate 参数传递，该参数在每个列表元素即将被渲染时被调用。在这个模板函数中，您可以检查它是否是最后一个元素，然后调用一些自定义逻辑。

【讨论】：