WinJS ListView 和模板绑定答案

【问题标题】：WinJS ListView and Template BindingWinJS ListView 和模板绑定
【发布时间】：2012-11-12 02:00:16
【问题描述】：

所以我试图通过模板显示来自 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]，而不是我想要显示的数据。

有什么方法可以创建模板以处理嵌套数据？定义模板函数会更容易吗？不知道在这里做什么...

【问题讨论】：

标签： data-binding windows-8 winjs

【解决方案1】：

没有内置的方法可以做到这一点——用于迭代数据的唯一内置控件是列表视图。但是，您不能嵌套列表视图。

有两种方法可以解决这个问题，具体取决于您想要的结果：

1) 对嵌套数据进行字符串化：您可以通过编写WinJS.Binding.converter 来完成此操作，该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>

此控件可以扩展为呈现嵌套模板和其他项目。这完全是您想要变得多复杂的问题。

【讨论】：

【解决方案2】：

试试data-win-bind="innerText: nested.nested_data"

【讨论】：

【解决方案3】：

使用模板函数会更容易。

内置的可绑定模板非常适合无逻辑的模板，但当您需要模板根据数据值（在您的情况下，更深层次的属性）做出决策时，它就不够用了。

【讨论】：