KnockoutJSと再帰テンプレート

Question

私はthis questionを見ており、そのメソッドを使用するとJSコンソールUncaught SyntaxError: Unexpected token)でエラーが発生します。

カテゴリの配列であるChildrenプロパティを持つカテゴリの再帰的な配列を取得しようとしていて、それらをjqueryテンプレートを使用して構築しています。私が試したすべてのメソッドは、構文エラーを引き起こします。オブジェクトがjavascript（MVC3から来て、@Html.Raw(Json.Encode(Model.Categories))を使用してJS配列に取得している）で正しく表示されていることを確認しました。テンプレートは

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

：

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

とテンプレート自体：ここで、元のCSHARPクラスは、テンプレートの最初のレベルを呼び出し、この元のHTML

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

あります子どものセクションを取り出して最初のレベルを適切に表現すれば動作します。コードをそのまま使用すると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); 

希望これは、将来の訪問者に