none
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

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 09, 2013 11:09 AM some wrong words
    Tuesday, July 09, 2013 9:30 AM