Error when setting ListView itemDataSource: Object doesn't support property or method 'createListBinding'

Question

I'm getting this exception when setting the source of a ListView:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'createListBinding'

My code is:

var dataArray = [{ title: 'blah' }, { title: 'blorg' }];
var dataList = new WinJS.Binding.List(dataArray);

// Set up the ListView.
var listView = element.querySelector(".itemlist").winControl;
ui.setOptions(listView, {
    itemTemplate: element.querySelector(".itemtemplate"),
    onselectionchanged: this.selectionChanged.bind(this),
    layout: new ui.ListLayout()
});
ui.setOptions(listView, {
    itemDataSource: dataList // Exception happens here
});

Am I doing something wrong?

Answer 1

Hi Juliana,

When you use setOptions() you are basically adding this value to the control like you would in the HTML layout.  You would need to have a variable that is visible to the control in that namespace. 

For example, look at this quickstart: http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

You will see for this definition it is accessing DataExample.itemlist.dataSource for the itemDataSource:

<div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate: mediumListIconTextTemplate, layout: {type: WinJS.UI.ListLayout}}">
    </div>  

But where does that come from?

It is exposed publicaly in the namespace in this code:

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

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Jeff

>> itemDataSource : DataExample.itemList.dataSource

Why can't I bind to the List instance? Why do I have to bind to a property of the List?

TIA

-Mike