Question

如果children數組有兩個字段 「孩子年齡」和「體重」，將在以下示例中進行什麼更改以進行查看和視圖模型的更改。

觀點：

<h2>People</h2> 
<ul data-bind="foreach: people"> 
<li> 
    <div> 
     <span data-bind="text: name"> </span> has <span data-bind='text: children().length'>&nbsp;</span> children:  
    </div> 
    <ul data-bind="foreach: children"> 
     <li> 
      <span data-bind="text: $data"> </span>     
     </li> 
    </ul> 
</li> 

視圖模型：

var Person = function(name, children) { 
this.name = name; 
this.children = ko.observableArray(children); 

this.addChild = function() { 
    this.children.push("New child"); 
}.bind(this); 
} 

var viewModel = { 
people: [ 
    new Person("Annabelle", ["Arnie", "Anders", "Apple"]), 
    new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]), 
    new Person("Charles", ["Cayenne", "Cleopatra"]) 
    ], 
}; 

ko.applyBindings(viewModel); 

Answer 1

您可以通過它的對象數組，而不僅僅是一個像字符串數組給孩子陣列添加額外的屬性所以：

new Person("Annabelle", [ 
    {Name: "Arnie", weight: 25, age: 2}, 
    {Name: "Anders", weight: 45, age: 5}, 
    {Name: "Apple", weight: 29, age: 2}]) 

和HTML的改變，像這樣：

<span data-bind="text: $data.Name"></span>  
<ul> 
    <li data-bind="text: $data.weight +'lbs. '"/> 
    <li data-bind="text: $data.age + ' years'"/> 
</ul> 

看看這個jsfiddle與工作解決方案。

Answer 2

顯然，孩子們將需要的對象。如果您打算也包含這些屬性，則可能會重複使用Person。

[{name:"Arnie", age: 1, weight: 2}] 

然後你綁定的屬性：

<span data-bind="text: name"> </span> 
<span data-bind="text: age"> </span> 
<span data-bind="text: weight"> </span> 

此外，您可以使用foreach結合，使HTML明確的'as' aliasing特徵體現在信息從

<ul data-bind="foreach: {data: children, as 'child'}"> 

未來

兒童財產的綁定將採取格式

<span data-bind="text: child.name"> </span> 

見this fiddle以供參考。