KnockoutJS y plantilla recursiva

Question

He visto this question, y utilizando su método arroja un error en la consola JS Uncaught SyntaxError: Unexpected token).

Estoy tratando de tomar una matriz recursiva de categorías, que tienen una propiedad Children que es una matriz de categorías, y construirlas usando una plantilla jquery. Cada método que he probado da como resultado algún error de sintaxis. He verificado que el objeto se muestra correctamente en javascript (viene de MVC3, usando @Html.Raw(Json.Encode(Model.Categories)) para obtenerlo en una matriz JS). Aquí está la clase CSharp originales

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

este código HTML original que llama al primer nivel de la plantilla:

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

y la propia plantilla:

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

La plantilla funciona si saco la sección de niños de ella, representando el primer nivel correctamente. Obtengo Uncaught SyntaxError: Unexpected token) cuando uso el código como está. ¿Qué estoy haciendo mal?

Answer 1

Su última {/if} debe ser {{/if}}

Este es un ejemplo: http://jsfiddle.net/rniemeyer/vbKVC/

Answer 2

pienso, tengo un poco mejor solución. Por favor, eche un vistazo:

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

Plantilla:

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

Esperanza esto ayuda