所以我试图通过模板显示来自JSON请求的一些数据.数据有一些与此类似的嵌套对象(数量不等):
data: "Some data",nested: [ { nested_data: "foo",bar: "foobar" },... ],...
我设法解析JSON并将其存储在Winjs.Binding.List对象中,并将结果绑定到模板.我遇到的问题实际上是在我的模板中显示嵌套的JSON数据.模板看起来像这样:
<div class="appTemplate"> <div class="innerTemplate"> <h1 data-win-bind="innerText: data"> <h2 data-win-bind="innerText: nested"> </div> </div>
当我运行那些程序时,模板的’嵌套’部分只是一堆[object Object]而不是我想要显示的数据.
没有内置的方法可以做到这一点 – 列表视图是迭代数据的唯一内置控件.但是,您无法嵌套列表视图.
1)对嵌套数据进行字符串化:您可以通过编写将您的数据数组转换为单个字符串值的Winjs.Binding.converter来完成此操作.例
码:
Winjs.Namespace.define("Examples.Converters",{ nestedDataConverter: Winjs.Binding.converter(function(input) { // Assume input is array var result = ""; input.forEach(function(data) { result += data.nested_data + "," + bar + ";"; }); result result; }),});
模板:
我推荐的解决方案是构建你自己的控件,它将获取你的数组(或Winjs.Binding.List)并创建所需的元素/布局.我在我工作的项目中完成了这项工作,而且非常简单.
示例模板:
<div class="appTemplate" data-win-control="Winjs.Binding.Template"> <div class="innerTemplate"> <h1 data-win-bind="innerText: data"> <h2 data-win-bind="innerText: nested Examples.Converters.nestedDataConverter"> </div> </div>
现在,h2将具有该数据的单字符串版本.
2)创建一个控件来丰富地显示数据:为此,您需要创建一个新的Winjs控件并在模板中使用它.
控制示例:
Winjs.Namespace.define("Examples.Controls",{ Stamper: Winjs.Class.define(function(element,options) { Winjs.UI.setoptions(this,options); this.domElement = element; },{ domElement: nullm _data: null,data: { set: function(val) { this._data = val; updateLayout(); } },updateLayout: function() { this.domElement.innerHTML = ""; if(!this._data) { return; } this._data.forEach(function(item) { var el = document.createElement("div"); el.textContent = "Data: " + item.nested_data + "," + item.bar; this.domElement.appendChild(el); }.bind(this)); } }),});
模板:
<div class="appTemplate" data-win-control="Winjs.Binding.Template"> <div class="innerTemplate"> <h1 data-win-bind="innerText: data"></h1> <div data-win-control="Examples.Controls.Stamper" data-win-bind="winControl.data: nested"></div> </div> </div>
可以扩展此控件以呈现嵌套模板和其他项.这都是你想要获得多么复杂的问题.
原文地址:https://www.jb51.cc/windows/371682.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。