如何在knockout.js中递归使用模板

Question

给定此模型和嵌套类别的视图模型:

function Category(id, name) {
    var self = this;
    self.Id = ko.observable(id || '00000000-0000-0000-0000-000000000000');
    self.Name = ko.observable(name);
    self.children = ko.observableArray();

    self.addCategory = function () {
        self.children.push(new Category("", ""));
    };

    self.removeCategory = function(category) {
        self.children.remove(category);
    };
}

var CategoryManagerViewModel = function() {
    var self = this;
    self.children = ko.observableArray();

    self.addCategory = function () {
        self.children.push(new Category("", ""));
    };

    self.removeCategory = function (category) {
        self.children.remove(category);
    };

    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.children), null, 2));
    };

    self.lastSavedJson = ko.observable("");
};

我如何制作模板,以便嵌套更多的子类别(然后嵌套在这些类别中的类别等),模板继续被重用以反映这一点？

目前我的模板是:

 <table class='categoriesEditor'>
                <tr>
                    <th>Category</th>
                    <th>Children</th>
                </tr>
                <tbody data-bind="foreach: children">
                    <tr>
                        <td>
                            <input data-bind='value: Name' />

                            <div><a href='#' style="color:black" data-bind='click: removeCategory'>Delete</a></div>
                        </td>
                        <td>
                            <table>
                                <tbody data-bind="foreach: children">
                                    <tr>
                                        <td><input data-bind='value: Name' /></td>
                                        <td><a href='#' style="color:black"  data-bind='click: removeCategory'>Delete</a></td>
                                        <td>
                                            <table>
                                                <tbody data-bind="foreach: children">
                                                    <tr>
                                                        <td><input data-bind='value: Name' /></td>
                                                        <td><a href='#' style="color:black" data-bind='click: removeCategory'>Delete</a></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <a href='#' style="color:black" data-bind='click: addCategory'>Add cat</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <a href='#' style="color:black"  data-bind='click: addCategory'>Add cat</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p>
            <button data-bind='click: addCategory'>Add root category</button>
            <button data-bind='click: save, enable: children().length > 0'>Save to JSON</button>
        </p>

这允许我在类别中嵌套3个级别,这对于这个应用程序是好的,但如果我想要更多呢？我为此复制粘贴标记吗？当然不是,我认为我已经完成了它.

更新:

绑定如下:

  var viewModel = new CategoryManagerViewModel();
        viewModel.addCategory();
        ko.applyBindings(viewModel);

Answer 1

对于这样的场景,您可能希望使用可以递归调用的命名模板.所以,你会有一个设置(简化),如:

<table>
    <tbody data-bind="template: { name: 'itemTmpl', data: root }"></tbody>
</table>

<script id="itemTmpl" type="text/html">
        <tr>
            <td data-bind="text: name"></td>
            <td>
                <table>
                    <tbody data-bind="template: { name: 'itemTmpl', foreach: children }"></tbody>
                </table>
            </td>   
        </tr>
</script>

所以,你可以在根音符上调用模板然后从那里调用它们对孩子们(可以在他们的孩子身上调用它等)

示例:http://jsfiddle.net/rniemeyer/ex3xt/