Các mẫu lồng nhau với KnockoutJS và MVC 3.0

Question

Tôi mới bắt đầu loại bỏ JS, nhưng tôi thích thú với mọi thứ mà tôi đang học mỗi ngày.

Đây là câu hỏi của tôi. Dựa trên Loading and saving data hướng dẫn, chúng ta hãy nói rằng tôi có các lớp sau trong MVC 3.0 xem mô hình của tôi:

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

Và đó Index của tôi() phương pháp của HomeController trả về một thể hiện của MasterModel với một danh sách các ParentModel, mỗi lần lượt chứa danh sách ChildModel. Về phía khách hàng, tôi có quan điểm sau đây:

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

Tôi muốn để có thể sử dụng các mẫu lồng nhau để hiển thị danh sách các ParentModel ràng buộc với MasterModel và cho mỗi ParentModel, danh sách các ChildrenModel. Tôi cũng muốn cả hai danh sách (ParentModel và ChildrenModel) là các mảng quan sát được để các mục của mỗi danh sách có thể được thêm vào hoặc loại bỏ một cách linh hoạt.

Tôi đã cố gắng thực hiện điều này sau khi "template" binding bài viết trên trang web Knockout JS, nhưng không chắc chắn làm thế nào để thực hiện các mảng quan sát được chứa danh sách các ... mảng quan sát ...

Có thể ai đó chỉ cho tôi đi đúng hướng?

Cảm ơn trước!

Answer 1

jsFiddle example này sẽ có thể giúp bạn trên đường đi, nó hoạt động như thế này:

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

Và mã này:

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