Windows 8 metro javascript app binding to a table - Stack Overflow

admin管理员组

文章数量:1410730

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;
}

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;
}

• javascript
• windows-8
• windows-runtime
• winjs
• microsoft-metro

Share Follow edited Jun 19, 2012 at 5:22 Luke Lowrey asked Jun 19, 2012 at 5:16 Luke LowreyLuke Lowrey 3,20533 gold badges3030 silver badges4141 bronze badges 3

• I see neither JavaScript nor JSON in the question...is that really right? (I haven't done a "JavaScript metro app" but what with the word "JavaScript" in the name...) – T.J. Crowder Commented Jun 19, 2012 at 5:18
• @T.J.Crowder updated to include the js for binding. I am inclined to believe the issue is with my templates rather than the js though – Luke Lowrey Commented Jun 19, 2012 at 5:23
• Have you checked what's happening when you change your listview to a div element and change your template to use divs? I don't know exactly how the html is rendered when you build up your template and table like this. – ChristiaanV Commented Jun 19, 2012 at 8:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 plete 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.

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();
};

本文标签： Windows 8 metro javascript app binding to a tableStack Overflow