KnockoutJS 组件；模板未呈现

Question

我一直在尝试这个关于 http://knockmeout.net 的精彩教程（使用组件子节点），它指导 knockoutjs 新功能 "child nodes of a component"；但是运行下面的代码没有任何错误，但似乎没有呈现模板，有人可以帮我吗？

提前致谢，约翰杰里科

查看模型：

export default { viewModel: {
 createViewModel:function(params,componentInfo) {
  var components = []; 
  var tabs = [];
  for (component in componentInfo.templateNodes) {
    var temp = componentInfo.templateNodes[component];
    var $temp = $(temp);
    var nodeName = $temp.prop("nodeName");
    if ( nodeName !== undefined ) {
      var id = $temp.attr('id'); 
      tabs.push({id:ko.observable(id),ref:ko.observable('#'+id)});
      components.push(temp);
    }
  }
  return {
   tabs:tabs,
   components:components
  }
 },
 dispose:function(){
 }
}, template: templateMarkup };

模板：

 <div class="tab">
     <ul class="tab-bar" data-bind="foreach:tabs">
      <li class="tab-bar-item"><a href="#" data-bind="attr:{href:ref},text:id"></a></li>
     </ul>
     <ul class="tab-containers" data-bind="foreach:components">
      <li class="tab-container">
       <div data-bind="template:{nodes:$data},click:function(){console.log($data);}"></div>
      </li>
     </ul>
    </div>

用法

<tab-bar>
<collection-viewer id="products" params="{items:products, size:'large', itemSize:'medium'}" class="block more--double-top-spacing">
    <div class="collection-item-display clip clip--rounded-box">
  <img class="collection-item-image" data-bind="attr:{src:image}"/>
 </div>
 <h3 class="collection-item-title" data-bind="text:title"></h3>
 <h3 class="collection-item-sub" data-bind="text:sub"></h3>
 <span class="collection-item-ratings" data-bind="foreach:ratings">
  <i class="fa fa-lg" data-bind="css:rate"></i>
 </span>
 <span class="collection-item-description" data-bind="text:description"></span>
</collection-viewer>

<collection-viewer id="users" params="{items:users, size:'medium',itemSize:'medium'}" class="block more--double-top-spacing">
 <div class="collection-item-display clip clip--circle">
  <img class="collection-item-image" data-bind="attr:{src:image}"/>
 </div>
 <h3 class="collection-item-title" data-bind="text:title"></h3>
 <h3 class="collection-item-sub" data-bind="text:sub"></h3>
 <blockquote class="collection-item-quotes" data-bind="text:quotes"></blockquote>      
</collection-viewer>
</tab-bar>

Answer 1

当您将 nodes 传递给 template 绑定时，它需要一个节点数组。所以，在你的情况下，你需要你的模板看起来更像：

 <li>
     <div data-bind="template:{ nodes: [$data] },click: function(){ console.log($data); }"></div>
 </li>

样本fiddle：http://jsfiddle.net/rniemeyer/69qx2vse/

KnockoutJS 组件；模板未呈现

KnockoutJS component; Template is not rendering

element

custom-component

knockout.js