नॉकआउटजेएस और एमवीसी 3.0

Question

के साथ नेस्टेड टेम्पलेट्स मैं जेएस नॉकआउट करने के लिए नया हूं, लेकिन मैं हर दिन सीख रहा हूं कि हर दिन आनंद ले रहा हूं।

मेरा प्रश्न यहां है। प्रत्येक, मेरे इंडेक्स() 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 की एक सूची है।

@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 की सूची MasterModel और प्रत्येक ParentModel, ChildrenModel की सूची के लिए बाध्य कर प्रदर्शित करने के लिए नेस्टेड टेम्पलेट का उपयोग करने में सक्षम होना चाहते हैं: ग्राहक पक्ष पर, मैं निम्नलिखित दृष्टिकोण है। मैं दोनों सूचियों (माता-पिता मॉडेल और चिल्ड्रन मॉडल) को अवलोकन करने योग्य सरणी भी देखना चाहता हूं ताकि प्रत्येक सूची के आइटम को गतिशील रूप से जोड़ा या हटाया जा सके।

मैं इस नॉकआउट जेएस साइट पर "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);