KnockoutJSとMVC 3.0を入れ子にしたテンプレート

Question

私はノックアウトJSの新人ですが、私が毎日学んでいるすべてのビットを楽しんでいます。

ここは私の質問です。 Loading and saving dataチュートリアルに基づいて、のは、私は私のMVC 3.0ビューモデルに以下のクラスを持っているとしましょう：

public class MasterModel 
{ 
    public int Id { get; set; } 
    public string Description { get; set; } 
    public ICollection<ParentModel> Parents { get; set; } 
} 

public class ParentModel 
{ 
    public int Id { get; set; } 
    public string Description { get; set; } 
    public ICollection<ChildModel> Children { get; set; } 
} 

public class ChildModel 
{ 
    public int Id { get; set; } 
    public string Description { get; set; } 
} 

とにHomeControllerの私のインデックス（）メソッドは、それぞれ、ParentModelのリストをMasterModelのインスタンスを返します次にChildModelのリストを含む。クライアント側では、私は次のビューがあります。

@model SomeNamespace.Models.MasterModel 

(...) 

<script type="text/javascript"> 
    var initialData = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)); 
    var viewModel = { 
     parents: ko.observableArray(initialData.Parents), 
    (...) 
    }; 

を私はMasterModelに、各ParentModel、ChildrenModelのリスト行きParentModelのリストを表示するには、ネストされたテンプレートを使用できるようにしたいと思います。また、リスト（ParentModelとChildrenModel）の両方を観測可能な配列にして、各リストの項目を動的に追加または削除できるようにします。

私はノックアウトJSサイトで"template" binding記事、以下これを実装しようとしましたが、...の観察可能なアレイのリストを含む観察可能な配列を実装する方法を確認していないしている...

誰かが私を指します正しい方向へ？

ありがとうございます！

Answer 1

このjsFiddle exampleが途中であなたを助けることができるはず、それは次のように動作します。

<ul data-bind="template: {name: 'TopTemplate' , foreach: masters}"></ul> 
<script type="text/html" id="TopTemplate"> 
    <li >  
     <p>${name}</p> 
     <ul data-bind=" template: {name: 'NestedTemplate' , foreach: parents } " style="list-style-type:circle;margin-left:15px"> 
     </ul> 
    </li> 

</script> 
<script type="text/html" id="NestedTemplate">   
    <li> 
     <p>${name}</p> 
     <ul data-bind=" template: {name: 'parentTemplate' , foreach: children } " style="list-style-type:circle;margin-left:15px"> 
     </ul> 
    </li> 
</script> 
<script type="text/html" id="parentTemplate">   
    <li> 
     <p>${name}</p> 
    </li> 
</script> 

そして、このコード：

var viewModel = { 
    masters: ko.observableArray([ 
     { 
     name: "Master1", 
     parents: [{ 
      name: "Parent 1", 
      children : [{ 
       name: "chlid 1"}, 
      { 
       name: "child 2"}]}, 
     { 
      name: "Parent 2", 
      children : [{ 
       name: "chlid 1"}, 
      { 
       name: "child 2"}]}]}, 
    { 
     name: "Master2", 
     parents: [{ 
      name: "Parent 3", 
      children : [{ 
       name: "chlid 1"}, 
      { 
       name: "child 2"}]}, 
     { 
      name: "Parent 4", 
      children : [{ 
       name: "chlid 1"}, 
      { 
       name: "child 2"}]}]}  ]) 
}; 

// ko magic... 
ko.applyBindings(viewModel);