Javascript app for windows 8 table bound

Question

I am having problems binding the table in my javascript metro application instead of the html binding provided in the template, which it puts in the div load and displays json as a string. This is what I have:

<tr id="tableRow" data-win-control="WinJS.Binding.Template"> <td data-win-bind="innerText: label"></td> <td data-win-bind="innerText: value"></td> <td></td> </tr> <table> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> </tr> </thead> <tbody class="topContent" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></tbody> </table> 

javascript that I use for binding (topContent is a list of {label, value} objects:

 function bindContent() { var list = new WinJS.Binding.List(); topContent.forEach(function (item) { list.push(item); }); var listView = document.querySelector(".topContent").winControl; var template = document.getElementById("tableRow"); listView.layout = new ui.ListLayout(); listView.itemTemplate = template; listView.itemDataSource = list.dataSource; } 

Answer 1

You cannot use a ListView like this. The ListView control adds a whole stack of additional elements to do its job, which causes problems with the table.

The answer is to work directly with the WinJS.Binding.Template control and use it to insert rows into your table element. Here is the HTML you'll need for the template:

 <table > <tbody id="myTemplate" data-win-control="WinJS.Binding.Template"> <tr > <td data-win-bind="innerText: label"></td> <td data-win-bind="innerText: value"></td> <td></td> </tr> </tbody> </table> 

You need to put the full table and tbody in the markup, so that the browser does not get upset, find the untethered tr element or insert the tbody element itself. The external element of the template is discarded, so only the tr tag will be created from the template when using it.

Here is the markup for the table into which the generated elements will be inserted - this is what you had, except that I added the id attribute so that I can find the element to insert content from Javascript:

 <table> <thead> <tr> <th>col1</th> <th>col2</th> <th>col2</th> </tr> </thead> <tbody id="myTableBody"> </tbody> </table> 

Finally, here is the code:

 WinJS.UI.processAll().then(function () { var tableBody = document.getElementById("myTableBody"); var template = document.getElementById("myTemplate").winControl; topContent.forEach(function (item) { template.render(item, tableBody); }); }); 

You must ensure that the Promise returned by WinJS.UI.processAll is executed before using the template. Calling the render method for each element that you want to process is the data element that you need to pass to the template to bind the data, and the DOM element to insert the generated elements into.

Answer 2

Are you calling the bindContent () function inside the processAll () promise? If not, try the following and see if it works.

 WinJS.UI.processAll().then(function () { bindContent(); };