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?

Answer 1

The Problem is resolved. Thanks.

I just use setAttribute function to set "data-win-bind" Attribute and WinJS.Binding.processAll function to bind data.

Answer 2

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!

Answer 3

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.