4

我无法在我的 javascript Metro 应用程序中绑定表，而不是与模板中提供的 html 绑定，它会放入大量 div 并将 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;
}
4

2 回答 2

7

你不能使用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调用方法 - 参数是要传递给模板以进行数据绑定的数据项和要插入生成的元素的 DOM 元素。render

于 2012-06-19T18:26:39.757 回答
0

您是否在 processAll() 承诺中调用 bindContent() 函数？如果没有，请尝试以下方法，看看它是否有效。

WinJS.UI.processAll().then(function () {
   bindContent();
};
于 2012-06-19T09:32:56.270 回答