在 component.template 内嵌套 ko.component

Question

我正在尝试使用 knockout.js (https://github.com/davewood/treejo)

构建基于 jquery 的树查看器库

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

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

这个 JSFiddle 演示了打开控制台时的问题。 http://jsfiddle.net/tyx89ude/8/

我必须将 knockout.js 复制并粘贴到 javascript window（向下滚动以查看我的代码），因为如果我通过 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\' }">\

在 component.template 内嵌套 ko.component

Nest ko.component inside of component.template

components

nested

knockout.js