WinJS.UI.ListView - 刷新项目时，使用模板使用JavaScript

我有一个使用HTML定义的模板这样一个ListView建：WinJS.UI.ListView - 刷新项目时，使用模板使用JavaScript

<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功能后，我的显示项目永远不会改变，当我绑定数据的变化。

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

来源

2013-03-13 bugfixr

你可以发布你用来更新数据的代码吗？另外，您是否设置了一个断点来验证在更改基础数据时是否调用了模板代码？ – devhammer 2013-03-14 01:37:08

更改数据后不会调用我的模板代码。这就是我需要的......我怎么才能让它被调用？ – bugfixr 2013-03-14 16:39:01

我认为有两种方法可以为你工作。

就我而言，当我刷新我的应用程序的数据时，可能有一个或多个实体可能完全过时，并且可能会显示新的实体。 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。

来源

2013-03-17 17:06:31 devhammer

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

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-28 19:45:08 rbyrne

WinJS.UI.ListView - 刷新项目时，使用模板使用JavaScript

回答

相关问题