KnockoutJS e modello ricorsivo

Question

Ho visto this question e utilizzando il suo metodo genera un errore sulla console JS Uncaught SyntaxError: Unexpected token).

Sto provando a prendere una matrice ricorsiva di categorie, che hanno una proprietà Children che è una matrice di categorie e le costruisce usando un modello jquery. Ogni metodo che ho provato risulta in un errore di sintassi. Ho verificato che l'oggetto viene visualizzato correttamente in javascript (viene da MVC3, utilizzando @Html.Raw(Json.Encode(Model.Categories)) per inserirlo in un array JS). Ecco la classe csharp originale

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

Questo HTML originale che chiama il primo livello del modello:

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

e il modello stesso:

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

Il modello funziona se tolgo la sezione bambini di esso, rendendo il primo livello correttamente. Ottengo Uncaught SyntaxError: Unexpected token) quando uso il codice così com'è. Che cosa sto facendo di sbagliato?

Answer 1

La tua ultima {/if} dovrebbe essere {{/if}}

Ecco un esempio: http://jsfiddle.net/rniemeyer/vbKVC/

Answer 2

penso, ho un po 'soluzione migliore. Si prega di dare un'occhiata:

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

Template:

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

Spero che questo aiuti