KnockoutJS 및 MVC 3.0이 포함 된 중첩 템플릿

Question

나는 녹아웃 JS를 처음 사용하지만 매일 배우는 모든 것을 즐기고 있습니다.

여기 내 질문입니다. 각, 내 색인()는 HomeController의 방법은 ParentModel의 목록을 MasterModel의 인스턴스를 반환

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; } 
} 

그리고 그 다음 Loading and saving data 튜토리얼을 바탕으로, 이제 내가 MVC 3.0 뷰 모델에서 다음과 같은 클래스가 있다고 가정 해 봅시다 차례로 ChildModel의리스트가 포함됩니다. 나는 MasterModel에 각 ParentModel, ChildrenModel 목록 행 ParentModel의 목록을 표시 할 중첩 된 템플릿을 사용할 수 있도록하고 싶습니다

@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), 
    (...) 
    }; 

: 클라이언트 측에, 나는 다음 볼 수 있습니다. 또한 두 목록 (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);