我在 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;
}
你不能使用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 元素。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)