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

希望这有助于