巢式ko.component在component.template中

Question

我正在尝试用knockout.js (https://github.com/davewood/treejo)构建基于jquery的树查看器库。

我构建了一个组件，并希望在自己的模板中使用该组件。

几乎可以工作，但是当初始化嵌套组件时，我得到了一些奇怪的错误。

如果打开控制台，此JSFiddle将演示此问题。http://jsfiddle.net/tyx89ude/8/

我不得不将knockout.js复制并粘贴到javascript窗口(向下滚动以查看我的代码)，因为如果我通过jsfiddle加载了ko.components函数，那么它是不可用的。

ko.components.register('node', {
    viewModel: function (params) {
        console.log(params);
        var self = this;
        self.title = ko.observable(params.title);
        self.url = params.url;
        self.body = ko.observable(params.body);
        self.classes = ko.observable('node node-closed');
        self.children = ko.observableArray(params.children);
        self.load = function () {
            var data1 = {
                'title': "title1",
                    'body': "body1",
                    'url': "url1"
            };
            var data2 = {
                'title': "title2",
                    'body': "body2",
                    'url': "url2"
            };
            self.children.push(data1);
            self.children.push(data2);
            self.classes('node node-open');
        };
        self.children.subscribe(function (data) {
            console.log(data)
        });
    },
    template:
        '<div data-bind="css: classes">\
            <div class="node-panel">\
              <div class="node-heading">\
                <a class="node-toggle" data-bind="click: load">&gt;</a>\
                <span class="node-title" data-bind="text: title"></span>\
              </div>\
              <!-- ko if: body -->\
              <div class="node-body" data-bind="text: body"></div>\
              <!-- /ko -->\
            </div>\
            <div class="node-content" data-bind="if: children().length > 0">\
              <div data-bind="attr: { title: title }" class="node-closer"><div></div></div>\
              <div data-bind="foreach: { data: children(), as: \'child\' }"></div>\
                <div data-bind="component: { name: \'node\', params: child }"></div>\
              </div>\
            </div>\
          </div>'
});

更新:正确的JSFiddle。http://jsfiddle.net/tyx89ude/26/谢谢弗拉德

Answer 1

您的模板标记出现了错误。

更改：

<div data-bind="foreach: { data: children(), as: \'child\' }"></div>\

至

<div data-bind="foreach: { data: children(), as: \'child\' }">\