KnockoutJS i szablon rekurencyjny

Question

Widziałem this question, a za pomocą tej metody zgłasza błąd na konsoli JS Uncaught SyntaxError: Unexpected token).

Próbuję pobrać rekurencyjną tablicę kategorii, które mają właściwość Children, która jest tablicą kategorii, i zbudować je za pomocą szablonu jquery. Każda metoda, którą wypróbowałem, skutkuje błędem składni. Zweryfikowałem, że obiekt jest poprawnie wyświetlany w javascript (pochodzi z MVC3, używając @Html.Raw(Json.Encode(Model.Categories)), aby go wprowadzić do tablicy JS). Oto oryginalna klasa CSharp

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

Ten oryginalny html, który wywołuje pierwszy poziom szablonu:

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

i szablon sama:

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

Szablon działa, jeśli wyjmę sekcję potomną, poprawnie renderując pierwszy poziom. Dostaję Uncaught SyntaxError: Unexpected token) kiedy używam tego kodu, jak jest. Co ja robię źle?

Answer 1

Twoja ostatnia {/if} powinny być {{/if}}

Oto przykład: http://jsfiddle.net/rniemeyer/vbKVC/

Answer 2

myślę, że mam trochę lepsze rozwiązanie. Proszę spojrzeć:

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

Szablon:

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

Javascript:

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

Nadzieja to pomaga