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

希望对你有帮助