Plantillas anidadas con KnockoutJS y MVC 3.0

Question

Soy nuevo en JS nocaut, pero estoy disfrutando de todo lo que estoy aprendiendo cada día.

Aquí está mi pregunta. Sobre la base de la Loading and saving data tutorial, vamos a decir que tengo las siguientes clases en mi MVC 3.0 vista del modelo:

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

y que mi método index() de la HomeController devuelve una instancia de MasterModel con una lista de ParentModel, cada a su vez contiene una lista de ChildModel. En el lado del cliente, tengo el siguiente punto de vista:

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

Me gustaría ser capaz de utilizar las plantillas anidadas para mostrar la lista de ParentModel unido al MasterModel y para cada ParentModel, la lista de ChildrenModel. También quiero que ambas listas (ParentModel y ChildrenModel) sean matrices observables para que los elementos de cada lista se puedan agregar o eliminar dinámicamente.

He intentado poner en práctica esta siguiendo el artículo "template" binding en el sitio Knockout JS, pero no estoy seguro de cómo implementar la matriz observable que contiene una lista de matrices ... observables ...

Puede alguien me punto en la dirección correcta?

¡Gracias de antemano!

Answer 1

Este jsFiddle example debe ser capaz de ayudarle en el camino, funciona así:

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

Y este código:

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