KnockoutJS和遞歸模板

Question

我見過this question，並且使用它的方法在JS控制檯Uncaught SyntaxError: Unexpected token)上拋出一個錯誤。

我想要遞歸的類別數組，有一個Children屬性是一個類別的數組，並使用jQuery模板構建出來。我嘗試過的每種方法都會導致語法錯誤。我已經驗證了該對象在javascript中正確顯示（它來自MVC3，使用@Html.Raw(Json.Encode(Model.Categories))將它放入JS數組中）。原來這裏是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; } 
} 

這調用模板的第一級原始的HTML：

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

和模板本身：

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

模板如果我拿出它的兒童部分，適當地渲染第一層就行。當我按原樣使用代碼時，我得到Uncaught SyntaxError: Unexpected token)。我究竟做錯了什麼？

Answer 1

你最後{/if}應該{{/if}}

這裏有一個例子：http://jsfiddle.net/rniemeyer/vbKVC/

Answer 2

我想，我有一點點更好的解決方案。請看看：

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

模板：

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

希望這有助於