没有内置的方法可以做到这一点——用于迭代数据的唯一内置控件是列表视图。但是,您不能嵌套列表视图。
有两种方法可以解决此问题,具体取决于您想要的结果:
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>
可以扩展此控件以呈现嵌套模板和其他项目。这完全是您想要变得多复杂的问题。