KnockoutJS組件;模板不渲染

我一直在嘗試這個奇妙的教程http://knockmeout.net（使用組件子節點），其中輔導knockoutjs新功能「組件的子節點」;然而，下面的代碼運行沒有任何錯誤，但似乎不呈現模板，任何人都可以請幫我嗎？KnockoutJS組件;模板不渲染

由於提前， johnjerrico

視圖模型：

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

模板：

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

USAGE

<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"> 
 
\t \t <img class="collection-item-image" data-bind="attr:{src:image}"/> 
 
\t </div> 
 
\t <h3 class="collection-item-title" data-bind="text:title"></h3> 
 
\t <h3 class="collection-item-sub" data-bind="text:sub"></h3> 
 
\t <span class="collection-item-ratings" data-bind="foreach:ratings"> 
 
\t \t <i class="fa fa-lg" data-bind="css:rate"></i> 
 
\t </span> 
 
\t <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"> 
 
\t <div class="collection-item-display clip clip--circle"> 
 
\t \t <img class="collection-item-image" data-bind="attr:{src:image}"/> 
 
\t </div> 
 
\t <h3 class="collection-item-title" data-bind="text:title"></h3> 
 
\t <h3 class="collection-item-sub" data-bind="text:sub"></h3> 
 
\t <blockquote class="collection-item-quotes" data-bind="text:quotes"></blockquote> \t \t \t  
 
</collection-viewer> 
 
</tab-bar>

來源

2015-11-26 johnjerrico

鏈接教程是重要和有益的 –

請，將您的示例代碼到一個片段。這使得回答你的問題變得更容易。請閱讀此：https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/這很容易做到。 – JotaBe

當通過nodes到template結合，它期待節點的數組。所以，你的情況，你會需要你的模板看起來更像：

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

樣品小提琴：http://jsfiddle.net/rniemeyer/69qx2vse/

來源

2015-11-28 19:21:45

謝謝@ rp-niemeyer !! – johnjerrico

KnockoutJS組件;模板不渲染

回答

相關問題