Question

我一直在http://knockmeout.net（使用组件子节点）上尝试这个精彩的教程，该教程辅助敲除新功能＆＃34;组件的子节点＆＃34; ;但是下面的代码运行时没有任何错误，但似乎没有呈现模板，有人可以帮助我吗？

提前致谢， johnjerrico

查看模型：

＆＃13;

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 };

＆＃13;

模板：

＆＃13;

 <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>

＆＃13;

USAGE

＆＃13;

<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>

＆＃13;

Answer 1

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

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

示例小提琴：http://jsfiddle.net/rniemeyer/69qx2vse/

KnockoutJS组件;模板不呈现

1 个答案: