基于组件参数动态构建的挖空组件模板

Question

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

用于登记部件将如下所示的基本代码：

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 & 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中显示的数据被vis从屏蔽。即：在上面的情况下，组件中只有foo和bar元素可见。 我试图解决的问题是如何从HTML组件声明采取PARAMS，并将它们传递给模板，以及视图模型，这样我可以使用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