基於組件參數動態構建的挖空組件模板

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