Zagnieżdżone szablony z KnockoutJS i MVC 3.0

Question

Jestem nowy w nokautowaniu JS, ale cieszę się, że uczę się każdego dnia.

Oto moje pytanie. Na podstawie tutorialu Loading and saving data, powiedzmy, że mam następujące klasy w moim MVC 3.0 Wygląd modelu

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

i że moja Index() Sposób HomeController zwraca instancję MasterModel z listą ParentModel każda z kolei zawierającą listę ChildModel. Po stronie klienta, mam następujący pogląd:

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

chciałbym móc używać zagnieżdżonych szablonów, aby wyświetlić listę ParentModel związany z MasterModel i dla każdego ParentModel, liście ChildrenModel. Chcę również, aby obie listy (ParentModel i ChildrenModel) były obserwowalnymi tablicami, aby elementy każdej listy mogły być dodawane lub usuwane dynamicznie.

starałem się wdrożyć to następujący artykuł "template" binding na stronie Knockout JS, ale nie jestem pewien, jak zaimplementować zaobserwowania tablicę zawierającą listę ... obserwowalnych tablic ...

Czy ktoś może wskazać mi w odpowiednim kierunku?

Z góry dziękuję!

Answer 1

Ten jsFiddle example powinien być w stanie pomóc Ci na drodze, to działa tak:

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

i ten kod:

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