Windows 8 Metro JavaScript 应用绑定到表格。

Question

我在我的 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;
}

- Luke Lowrey

---

我在问题中看不到JavaScript或JSON...这真的没错吗？（我没有做过“JavaScript metro app”，但名字中有“JavaScript”这个词怎么办...） - T.J. Crowder

@T.J.Crowder已更新，包括绑定的js代码。我倾向于认为问题出在我的模板上，而不是js上。 - Luke Lowrey

你有检查过当你将listview更改为div元素并更改模板以使用div时会发生什么吗？我不确定当你像这样构建模板和表格时html是如何呈现的。 - ChristiaanV

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>

您需要在标记中放置完整的表格和，以便浏览器不会因为找不到未附加的tr元素或插入tbody元素而感到不安。模板的外部元素将被丢弃，因此只有元素将从使用模板时生成。

这是表格的标记，生成的元素将插入其中 - 这就是您拥有的内容，除此之外，我添加了一个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);
    });
});

在使用模板之前，您需要确保WinJS.UI.processAll返回的Promise已经被执行。对于您想要处理的每个项目，请调用render方法 - 参数是要传递给数据绑定模板的数据项和要插入生成元素的DOM元素。

- Adam Freeman

---

怀疑可能是这个问题。给有类似问题的人一个提示 - 如果您使用DOM浏览器，可以看到与列表视图一起提供的额外标记。 - Luke Lowrey

Answer 2

你是否在 processAll() promise 中调用了 bindContent() 函数？如果没有，请尝试以下方法并查看其是否可行。

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

- Jatajuuf