0

我有一个使用 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 函数后，我的显示项目在我的绑定数据更改时永远不会更改。

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

4

2 回答 2

4

I think there are two approaches that could work for you.

In my case, when I refresh the data for my app, it's possible that one or more entities may be completely out of date, and there may be new entities to display. So I simply re-set the binding of the ListView, like so:

listView.itemDataSource = Data.items.dataSource;

where Data is the namespace I set up in data.js to contain all my data functions and objects.

When I update the value of the itemDataSource property, the ListView will re-bind to the new data, and display the correct items.

The other thing to look at, if your data is only being updated one property at a time, is using the WinJS.Binding.as function to make the items in the binding list observable, as described here:

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

If you haven't seen it already, there's some good info on databinding here:

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

And I found the following MSDN forum thread that may be helpful:

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

Hope the above helps!

For more information on Windows Store app development, register for App Builder.

于 2013-03-17T17:06:31.010 回答
0

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

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;
  }
}
于 2014-01-28T19:45:08.843 回答