javascript - WinJS.UI.ListView - 使用 JavaScript 构建模板时刷新项目

Question

我有一个使用 HTML 定义的模板的 ListView，如下所示:

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div>

        <!-- Displays the "picture" field. -->
        <img data-win-bind="alt: title; src: picture" />
        <div>

            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. --> 
            <h6 data-win-bind="innerText: description"></h6>
        </div>
    </div>
</div>

<div id="basicListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
</div>

当我的列表项发生更改时，我的项目模板将更新以反射(reflect)更改。然而，出于需要，我不得不改为使用 javaScript 函数来构建我的模板。我根据示例站点上找到的代码对我的代码进行了建模:

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll().then(function () {
            var lView = document.getElementById("templateFunctionListView").winControl;
            lView.itemTemplate = itemTemplateFunction;

        }));

    }
};

function itemTemplateFunction(itemPromise) {

   return itemPromise.then(function (item) {
       var div = document.createElement("div");

       var img = document.createElement("img");
       img.src = item.data.picture;
       img.alt = item.data.title;
       div.appendChild(img);

       var childDiv = document.createElement("div");

       var title = document.createElement("h4");
       title.innerText = item.data.title;
       childDiv.appendChild(title);

       var desc = document.createElement("h6");
       desc.innerText = item.data.text;
       childDiv.appendChild(desc);

       div.appendChild(childDiv);

       return div;
   });
};

更改为javascript函数后，当我的绑定(bind)数据发生变化时，我的显示项永远不会改变。

我需要做什么才能让它们更新？

Answer 1

我认为有两种方法可能适合您。

就我而言，当我刷新应用程序的数据时，一个或多个实体可能完全过时，并且可能有新的实体要显示。所以我只是重新设置 ListView 的绑定(bind)，如下所示:

listView.itemDataSource = Data.items.dataSource;

其中 Data 是我在 data.js 中设置的命名空间，用于包含所有数据函数和对象。

当我更新 itemDataSource 属性的值时，ListView 将重新绑定(bind)到新数据，并显示正确的项目。

如果您的数据一次仅更新一个属性，则需要注意的另一件事是使用 WinJS.Binding.as 函数使绑定(bind)列表中的项目可观察，如下所述:

http://msdn.microsoft.com/en-us/library/windows/apps/hh781224.aspx#updating_changing_records

如果您还没有看过，这里有一些关于数据绑定(bind)的好信息:

http://msdn.microsoft.com/en-us/library/windows/apps/hh758311.aspx

我发现以下 MSDN 论坛主题可能会有所帮助:

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/21b9603f-e28d-4c93-b164-a2c91ba5c4ca

希望以上内容对您有所帮助!

有关 Windows 应用商店应用程序开发的更多信息，请注册 App Builder .