नॉकआउटजेएस और रिकर्सिव टेम्पलेट

Question

मैंने this question देखा है, और इसकी विधि का उपयोग करके जेएस कंसोल Uncaught SyntaxError: Unexpected token) पर एक त्रुटि फेंकता है।

मैं श्रेणियों की एक पुनरावर्ती सरणी लेने की कोशिश कर रहा हूं, जिसमें Children संपत्ति है जो श्रेणियों की एक श्रृंखला है, और एक jquery टेम्पलेट का उपयोग करके उन्हें बाहर निकालें। मैंने कोशिश की हर विधि कुछ वाक्यविन्यास त्रुटि में परिणाम। मैंने सत्यापित किया है कि ऑब्जेक्ट जावास्क्रिप्ट में ठीक से दिख रहा है (यह एमवीसी 3 से आ रहा है, इसे @Html.Raw(Json.Encode(Model.Categories)) का उपयोग करके जेएस सरणी में प्राप्त करने के लिए)। यहाँ मूल कोई तिथि नहीं वर्ग है

public class CategoryTreeModel 
{ 
    public int Id { get; set; } 
    public string Name{ get; set; } 
    public bool Selected { get; set; } 
    public bool HasChildren { get { return Children.Count > 0; } } 
    public List<CategoryTreeModel> Children { get; set; } 
} 

यह मूल html कि टेम्पलेट के पहले स्तर कॉल:

<ul class="nav" data-bind="template: {name: 'categories_template', foreach: categories}"> 
     </ul> 

और स्वयं टेम्पलेट:

<script type="text/html" id="categories_template"> 
<li id="category_${Id}" class="category_header">${Name} 
    {{if $data.HasChildren }} 
     <ul data-bind='template: { name: "categories_template", foreach: Children}'> 
     </ul> 
    {/if} 
</li>  

टेम्पलेट काम करता है अगर मैं इसके बच्चों के अनुभाग को बाहर ले जाता हूं, तो पहले स्तर को सही तरीके से प्रस्तुत करता हूं। जब मैं कोड का उपयोग करता हूं तो मुझे Uncaught SyntaxError: Unexpected token) मिलता है। मैं क्या गलत कर रहा हूं?

Answer 1

आपकी आखिरी {/if}{{/if}}

यहां एक नमूना है किया जाना चाहिए: http://jsfiddle.net/rniemeyer/vbKVC/

Answer 2

मुझे लगता है, मैं एक छोटे से बेहतर समाधान है। कृपया एक बार देख ले:

http://jsfiddle.net/nonsense66/Bzekr/

टेम्पलेट:

<script id="treeElement" type="text/html"> 
    <li> 
     <span data-bind="text: name"></span> 
     <ul data-bind="template: { name: 'treeElement', foreach: children }"> 
     </ul> 
    </li> 
</script>  

<ul data-bind="template: { name: 'treeElement', foreach: $data.treeRoot }"></ul> 

जावास्क्रिप्ट:

var viewModel = { 
    treeRoot: ko.observableArray() 
}; 

var TreeElement = function(name, children) { 
    var self = this; 
    self.children = ko.observableArray(children); 
    self.name = ko.observable(name); 
} 

var tree = [ 
    new TreeElement("Russia", [ 
     new TreeElement("Moscow") 
    ]), 
    new TreeElement("United States", 
     [ 
      new TreeElement("New York", [ 
       new TreeElement("Harlem"), 
       new TreeElement("Central Park") 
      ]) 
     ]) 
]; 

viewModel.treeRoot(tree); 

ko.applyBindings(viewModel); 

आशा इस भावी आगंतुकों के लिए मदद करता है