knockout.js - 将 ko.component 嵌套在 component.template 中

Question

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

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

几乎可以工作，但在初始化嵌套组件时出现了奇怪的错误。

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

我必须将 knockout.js 复制并粘贴到 javascript 窗口中(向下滚动以查看我的代码)，因为如果我通过 jsfiddle 加载 knockout，则 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\' }">\