İç içe geçmiş şablonlar KnockoutJS ve MVC 3.0 ile

Question

JS'yi nakavt etmek için yeniyim, ama her gün öğrendiğim her şeyin tadını çıkarıyorum.

İşte benim sorum. Her benim Endeksi() HomeController yöntemi ParentModel listesiyle MasterModel örneğini döndürür

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

Ve: Loading and saving data öğretici dayanarak, en benim MVC 3.0 görünümü modelinde aşağıdaki sınıfları olduğunu varsayalım sırayla ChildModel bir listesini içerir. Ben MasterModel ve her ParentModel, ChildrenModel listesinde gitmekte ParentModel listesini görüntülemek için iç içe şablonları kullanabilmek için istiyorum

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

: istemci tarafında, ben şu manzarasına sahiptir. Her iki listenin de dinamik olarak eklenebilmesi veya kaldırılabilmesi için her iki listenin de (ParentModel ve ChildrenModel) gözlenebilir diziler olmasını istiyorum.

bu Nakavt JS sitesinde "template" binding makale aşağıdaki uygulamak çalıştı ancak bir ... gözlemlenebilir diziler listesini içeren gözlemlenebilir dizinin nasıl uygulanacağı emin değilim var ...

Birisi bana işaret edebilir doğru yöne

Şimdiden teşekkürler!

Answer 1

Bu jsFiddle example yolda size yardımcı olmalıdır, bu gibi çalışır:

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

Ve bu kodu:

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