KnockoutJS và Mẫu đệ quy

Question

Tôi đã xem this question và sử dụng phương pháp của nó sẽ phát sinh lỗi trên bảng điều khiển JS Uncaught SyntaxError: Unexpected token).

Tôi đang cố gắng lấy một mảng đệ quy của các danh mục, có thuộc tính Children là một danh mục và xây dựng chúng bằng cách sử dụng mẫu jquery. Mỗi phương pháp tôi đã thử kết quả trong một số lỗi cú pháp. Tôi đã xác minh rằng đối tượng được hiển thị đúng trong javascript (đến từ MVC3, sử dụng @Html.Raw(Json.Encode(Model.Categories)) để đưa nó vào một mảng JS). Đây là lớp CSharp gốc

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 gốc này mà các cuộc gọi cấp độ đầu tiên của mẫu:

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

và mẫu tự:

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

Mẫu hoạt động nếu tôi đưa ra phần trẻ em của nó, thể hiện cấp độ đầu tiên đúng cách. Tôi nhận được Uncaught SyntaxError: Unexpected token) khi tôi sử dụng mã như vậy. Tôi đang làm gì sai?

Answer 1

của bạn cuối cùng {/if} nên {{/if}}

Đây là một mẫu: http://jsfiddle.net/rniemeyer/vbKVC/

Answer 2

Tôi nghĩ rằng, tôi có một giải pháp ít hơn. Hãy xem:

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

mẫu:

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

Hope this helps