Windows 8 metro javascript app绑定到表

Question

我在我的javascript metro应用程序中绑定一个表时遇到问题,而不是绑定它放在div中加载的模板中提供的html,并将json作为字符串呈现.这就是我所拥有的:

<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(topContent是{label,value}对象的列表:

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

你不能使用ListView这样的.该ListView控制增加了额外的元素的整个堆栈来完成工作,这是造成你的表的问题.

答案是WinJS.Binding.Template直接使用控件并使用它将行插入到表元素中.以下是模板所需的HTML:

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

您需要tbody在标记中放置一个完整的表,以便浏览器不会对找到未附加的tr元素或插入tbody元素本身感到不安.模板的外部元素将被丢弃,因此tr在使用模板时,只会从模板生成元素.

这是表的标记,其中将插入生成的元素 - 这是你所拥有的,除了我添加了一个id属性,所以我可以找到从Javascript插入内容的元素:

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

最后,这是代码:

WinJS.UI.processAll().then(function () {
    var tableBody = document.getElementById("myTableBody");
    var template = document.getElementById("myTemplate").winControl;

    topContent.forEach(function (item) {
        template.render(item, tableBody);
    });
});

在使用模板之前,您需要确保已完成Promise返回的WinJS.UI.processAll.render为要处理的每个项调用方法 - 参数是要传递给模板以进行数据绑定的数据项,以及用于将生成的元素插入的DOM元素.