Answered by:
How to bind data to listView in itemTemplate function?

Question
-
As known, We can bind a data to listView use "win-data-bind" property in itemTemplate like this:
<div id="listTemplate" data-win-control="WinJS.Binding.Template"> <div> <img data-win-bind="src: uri" src ="#"/> </div> </div> <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemTemplate: select('#listTemplate'), itemDataSource: Data.List.dataSource, selectionMode: 'multi', tapBehavior: 'invoke', swipeBehavior: 'select', layout: { type: 'WinJS.UI.GridLayout', maxRows: 1} }"></div>
And using WinJS.Binding.as function , the listView will update when the data changes, like this:
WinJS.Binding.as( Data.List.getAt(index)).uri = //another picture's url
Now, I use a function as the itemTemplate of listView like this:
<div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: Data.List.dataSource, selectionMode: 'multi', tapBehavior: 'invoke', swipeBehavior: 'select', layout: { type: 'WinJS.UI.GridLayout', maxRows: 1} }"></div>
listViewControl = document.getElementById('listView').winControl; listViewControl.itemTemplate = createListViewItems; function createListViewItems(itemPromise) { return itemPromise.then(function (item) { var div1 = document.createElement("div"); var img1 = document.createElement("img"); img1.src = item.data.uri; div1.appendChild(img1); return div1; }); }
But the listView does not update when the data changes, What can I do?
- Edited by Lattimore Thursday, December 13, 2012 9:00 AM
Thursday, December 13, 2012 8:59 AM
Answers
-
The Problem is resolved. Thanks.
I just use setAttribute function to set "data-win-bind" Attribute and WinJS.Binding.processAll function to bind data.
- Marked as answer by Lattimore Friday, December 14, 2012 12:50 AM
Friday, December 14, 2012 12:50 AM
All replies
-
The Problem is resolved. Thanks.
I just use setAttribute function to set "data-win-bind" Attribute and WinJS.Binding.processAll function to bind data.
- Marked as answer by Lattimore Friday, December 14, 2012 12:50 AM
Friday, December 14, 2012 12:50 AM -
I think I am having the same issue described in the OP, but I do not completely understand what you did to resolve it. Can you post the parts of the code you changed? Thanks!Friday, June 28, 2013 11:35 PM
-
Some code like this:
var div1 = document.createElement("div"); var img1 = document.createElement("img"); img1.src = item.data.uri; img1.setAttribute("data-win-bind", "src:uri"); div1.appendChild(img1); WinJS.Binding.processAll(div1, item.data); return div1;
you can find WinJS data binding reference here: WinJS.Binding.processAll.
- Edited by Lattimore Tuesday, July 9, 2013 11:09 AM some wrong words
Tuesday, July 9, 2013 9:30 AM