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

回答

相關問題