Simple WinJS ListView Binding

Question

I am developing a Windows 8.1 app, and I have some data I want to bind to a listview. For some reason, I am not able to have the data shown, and I am not quite sure where I am making the mistake.

HTML:

<div id="resultTemplate" data-win-control="WinJS.Binding.Template">
    <div class="win-type-small result" data-win-bind="innerText:name"></div>
</div>
<div data-win-control="WinJS.UI.ListView" id="resultsView"></div>

Javascript:

var results = [{ name: "quebec" }, { name: "quebec1" }];
var dataList = new WinJS.Binding.List(results);
var resultsListView = document.getElementById("resultsView").winControl;
var resultTemplate = document.getElementById("resultTemplate");

resultsListView.itemTemplate = resultTemplate;
resultsListView.itemDataSource = dataList.dataSource;

I am calling WinJS.UI.processAll() at the top of my javascript.

Looks good to me. You'll have to provide your full code so we can see the page lifecycle functions and stuff. — Jeremy Foster

sebagomez sebagomez · Accepted Answer · 2014-08-29T22:09:42

I don't see anything wrong with it, but you could try setting the itemTemplate in the html.

<div id="resultTemplate" data-win-control="WinJS.Binding.Template">
    <div class="win-type-small result" data-win-bind="innerText:name"></div>
</div>
<div data-win-control="WinJS.UI.ListView" id="resultsView" data-win-options="{ itemTemplate: select('#resultTemplate')}"></div>

Notice the new data-win-options attribute in ListView tag

Simple WinJS ListView Binding

1 Answers