WinJS ListView和模板绑定 [英] WinJS ListView and Template Binding
问题描述
所以我试图通过模板显示JSON请求中的一些数据。数据有一些类似于这样的嵌套对象（不同数量）：
So I'm trying to display via a template some data from a JSON request. The data has some nested objects (of varying amounts) similar to this:
data: "Some data",
nested: [
{
nested_data: "foo",
bar: "foobar"
}, ...
],
...
我已经设法解析JSON，并将其存储在$ code> WinJS中。 Binding.List 对象，并将结果绑定到一个模板。我遇到的问题实际上是在我的模板中显示嵌套的JSON数据。模板看起来像这样：
I've managed to parse the JSON fine and store it in a WinJS.Binding.List object, and bound the result to a template. The problem I've got is actually displaying the nested JSON data in my template. The template looks something like this:
<div class="appTemplate">
<div class="innerTemplate">
<h1 data-win-bind="innerText: data">
<h2 data-win-bind="innerText: nested">
</div>
</div>
当我运行程序时，模板的嵌套部分只是一堆 [object Object] 而不是我想显示的数据。
When I run the program those, the 'nested' part of the template is just a bunch of [object Object] rather than the data I want to display.
有没有办法我可以创建模板它可以处理嵌套数据？定义模板函数会更容易吗？不确定在这里做什么...
Is there some way I can create the template such that it can handle the nested data? Would it be easier to define a template function? Not sure what to do here...
推荐答案
没有内置的方法来做 - 只有内置的控件用于迭代数据是列表视图。但是，您无法嵌套列表视图。
There is no built in way to do this -- the only built in control for iterating over data is the List View. However, you cannot nest List Views.
根据您的预期结果，有两种方法可以解决此问题：
There are two ways to solve this problem, depending on your desired outcome:
1）对嵌套数据进行字符串：您可以通过编写一个 WinJS.Binding.converter 来实现，将会将您的数据数组转换为单个字符串值。例如
1) Stringifying the nested data: You can do this by writing a WinJS.Binding.converter that will convert your array of data into a single string value. Example
代码：
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 ）并创建所需的元素/布局。我在一个我工作的项目中做到了这一点，这是非常简单的。
My recommended solution would to build your own control that will take your array (or WinJS.Binding.List) and create the elements / layouts needed. I have done this in a project I work on, and it's super simple.
示例模板：
<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将具有该数据的单字符串版本。
Now, the h2 will have the single-string version of that data.
2）创建一个控件来丰富显示数据：要执行此操作，您需要创建一个新的WinJS控件并在模板中使用它。
2) Create a control to display the data richly: To do this you need to create a new WinJS control and use it in your template.
控制示例：
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>
此控件可以扩展为呈现嵌套模板和其他项目。这一切都是你想要多么复杂的问题。
This control can be extended to render nested templates, and other items. It's all a question of how complex you want to get.
这篇关于WinJS ListView和模板绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
