KnockoutJS ve Yinelemeli Şablon

Question

this question'u gördüm ve yöntemini kullanarak JS konsolunda Uncaught SyntaxError: Unexpected token) bir hata oluşturuyor.

Kategorilerin bir dizisi olan Children özelliğine sahip ve jQuery şablonu kullanarak bunları oluşturmaya çalışan özyinelikli bir dizi kategoriyi almaya çalışıyorum. Denediğim her yöntem bazı sözdizimi hatasıyla sonuçlanır. Nesnenin javascript'te düzgün bir şekilde gösterildiğini doğruladım (bir MV dizisine dönüştürmek için @Html.Raw(Json.Encode(Model.Categories)) kullanarak MVC3'ten geliyor). İşte asıl csharp sınıftır

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

şablonun ilk seviyesini çağırır Bu orijinal html:

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

ve şablonu kendisi:

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

şablonu Çocuk bölümlerini çıkarırsam ilk seviyeyi düzgün bir şekilde verirsek çalışır. Kodu olduğu gibi kullandığımda Uncaught SyntaxError: Unexpected token) olsun. Neyi yanlış yapıyorum?

Answer 1

Sizin son {/if} İşte {{/if}}

bir örnek olmalıdır: http://jsfiddle.net/rniemeyer/vbKVC/ bence

Answer 2

, biraz daha iyi bir çözüm var. Bir göz atın:

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

Şablon:

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

Umut bu, bu knockout1.3 oldu gelecek ziyaretçiler için