locked
[JS] How can I dynamically change the data source of a ListView?

    Question

  • Hello everyone,

    I have this HTML code:

    <div id="lvData" data-win-control="WinJS.UI.ListView"></div>

    And now I want to dynamically add items/change the data source:

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    document.getElementById("lvData").winControl.itemDataSource = dataList;

    But that gives me this error:

    TypeError: Object doesn't support property or method 'createListBinding'


    Monday, June 4, 2012 9:42 AM

Answers

  • You need to use the Binding List dataSource property.  Change your last line to this:

    document.getElementById("lvData").winControl.itemDataSource = dataList.dataSource;
    
    

    Monday, June 4, 2012 10:00 AM

All replies

  • You need to use the Binding List dataSource property.  Change your last line to this:

    document.getElementById("lvData").winControl.itemDataSource = dataList.dataSource;
    
    

    Monday, June 4, 2012 10:00 AM
  • Thanks jrboddie, it works now!

    In my application, I load the data multiple times. Should I delete the old WinJS.Binding.List object?

    Monday, June 4, 2012 10:28 AM
  • I don't think it is necessary.

    If you are just adding or deleting items from the list, consider operating directly on the binding list object using push/pop.  The binding list will then automatically notify and change your listview using animations (and proper sorting, if you are using it).

    If you want to completely use a different set of list items, reinitialize the binding list object using new WinJS.Binding.List() and notify the ListView by calling dataList.notifyReload().

    Monday, June 4, 2012 10:45 AM