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>

当我的列表项更改后，我的项目模板将更新以反映更改。但是，出于需要，我不得不改为使用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函数后，我的显示项在绑定数据更改时永远不会更改。

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

Answer 1

我认为有两种方法可以帮助你。

就我而言，当我刷新应用程序的数据时，一个或多个实体可能已完全过时，并且可能会显示新的实体。所以我只需重新设置ListView的绑定，如下所示：

listView.itemDataSource = Data.items.dataSource;

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

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

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

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

如果您还没有看到它，那么这里有一些关于数据绑定的好信息：

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。

Answer 2

您可以重新绑定单个项目，而不是重新绑定整个数据集。在列表中找到项目位置，然后将其拼接成自己替换它。

for (var i = 0; i < list.length; i++){
  item = list.getAt(i);
  if (item.key == itemToBeReBound.key){
    list.splice(i, 1, item);
    i = list.length;
  }
}

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

2 个答案: