数据绑定 – WinJS ListView和模板绑定

所以我试图通过模板显示来自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>

可以扩展此控件以呈现嵌套模板和其他项.这都是你想要获得多么复杂的问题.

数据绑定 – WinJS ListView和模板绑定

相关文章