WinJS ListView和模板绑定

所以我试图通过模板显示一些JSON请求的数据。该数据有一些嵌套的对象（金额不等），与此类似：WinJS ListView和模板绑定

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]，而不是我想要显示的数据。

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

来源

2012-11-12 canadiancaper

没有内置的方式做到这一点 - 这是唯一建在控制用于遍历数据列表视图。但是，您不能嵌套列表视图。

有两种方法来解决这个问题，这取决于你想要的结果：

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>

这种控制可以扩展到渲染嵌套模板和其它项目。这都是你想得到多么复杂的问题。

来源

2012-11-12 02:53:23

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

来源

2012-11-12 02:24:16 siger

使用模板功能会更容易。

内置的可绑定模板适用于无逻辑模板，但在您需要模板基于数据值进行决策时属于不可用模板，在您的情况下，属性较深。

来源

2012-11-21 20:11:08

WinJS ListView和模板绑定

回答

相关问题