Question

我目前正在使用knockout.js作为我正在开发的应用程序的一部分。我需要实现一个淘汰组件，其中包含一个无序列表，其列表项根据组件参数的不同而不同。

注册组件的基本代码如下：

ko.components.register('data-display', {
    viewModel: function(name, obj, vis) {
        var self = this;
        for (var index in obj) {
            self[index] = obj[index];
        }
    },
    template: //Template lives here
});

function templateConstructor(name, obj, vis) {
    var template = '<h2>' + name + '</h2>\r\n';
    template += '<ul>\r\n';
    for (var index in obj) {
        var kvInfo = getKVInfo(vis, index); 
        if (kvInfo) {
            template += '<li><strong>' + kvInfo + '</strong><span data-bind="text: ' + index + '"></span></li>\r\n';
        }
    }
    template += '</ul>\r\n';
    return template;
}

function getKVInfo(vis, index) {
    for(var key in vis) {
        if (key == index) {
            return vis[key];
        }
    }
    return False;
}

obj，name＆amp;的值vis将采用以下形式：

var name = "Information"
var obj = {foo: ko.observable('bar'), bar: ko.observable('foo'), ta: ko.observable('da')}
var vis = {foo: 'Foo Info: ', bar: 'Bar Info: '}

这个想法是组件将有一个包含名称的标题，然后显示从obj屏蔽的数据。即：在上面的情况中，只有foo和bar元素在组件中可见。我试图解决的问题是如何从HTML组件声明中获取参数并将它们传递给模板以及视图模型，这样我就可以使用html：

<data-display params="name: name, obj: obj, vis: vis"></data-display>

获得这个结果：

<h2>Information</h2>
<ul>
    <li><strong>Foo Info: </strong><span data-bind="text: foo"></span></li>
    <li><strong>Bar Info: </strong><span data-bind="text: bar"></span></li>
</ul>

Answer 1

没有内置支持组件具有动态创建的模板。但是组件可以定义createViewModel属性而不是视图模型构造函数，该构造函数可以访问该元素。这是一个例子：

ko.components.register('data-display', {
    viewModel: {
        createViewModel: function(params, componentInfo) {
            var componentVM = new viewModelConstructor(params);
            var template = templateConstructor(componentVM);
            ko.virtualElements.setDomNodeChildren(componentInfo.element, ko.utils.parseHtmlFragment(template));
            return componentVM;
        }
    },
    template: []
});

或者您可以使用我在https://github.com/knockout/knockout/issues/1458#issuecomment-154578662

发布的通用组件加载程序

基于组分参数的动态构建的敲除组件模板

1 个答案: