Windows 8 metro javascript app绑定到表
发布时间:2020-12-14 03:58:20 所属栏目:Windows 来源:网络整理
导读:我在我的 javascript metro应用程序中绑定一个表时遇到问题,而不是绑定它放在div中加载的模板中提供的html,并将json作为字符串呈现.这就是我所拥有的: tr id="tableRow" data-win-control="WinJS.Binding.Template" td data-win-bind="innerText: label"/td
我在我的
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; } 解决方法
你不能像这样使用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); }); }); 您需要确保在使用模板之前满足WinJS.UI.processAll返回的Promise.为要处理的每个项调用render方法 – 参数是要传递给模板以进行数据绑定的数据项,以及用于将生成的元素插入的DOM元素. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读