Windows 8 metro javascript app binding to a table

Question

I am having trouble binding a table in my javascript metro app instead of binding with the html provided in the template it puts in a load of divs and renders the 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>

The javascript I am using to bind (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 can't use a ListView like this. The ListView control adds a whole stack of extra elements to do its work, which is causing your table problems.

The answer is to work with the WinJS.Binding.Template control directly 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 a complete table and tbody in the markup so that the browser doesn't get upset about finding an unattached tr element or insert the tbody element itself. The outer element of a template is discarded, so only the tr element will be generated from the template when you use it.

Here is the markup for the table, where the generated elements will be inserted - this is what you had, except I have added an id attribute so I can find the element to insert content into 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 need to make sure that the Promise returned by WinJS.UI.processAll is fulfilled before you use the template. Call the render method for each item you want to process - the arguments are the data item to pass to the template for data binding 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();
};