I've been trying this wonderful tutorial on http://knockmeout.net (Working with component child nodes) which tutoring knockoutjs new feature "child nodes of a component"; however the code below which run without any error but doesn't seems to render the template, could anyone please help me out?
Thanks in advance, johnjerrico
VIEW MODEL :
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 };TEMPLATE :
<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>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">
<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>When you pass nodes to the template binding, it is expecting an array of nodes. So, in your case, you would need your template to look more like:
<li>
<div data-bind="template:{ nodes: [$data] },click: function(){ console.log($data); }"></div>
</li>
Sample fiddle: http://jsfiddle.net/rniemeyer/69qx2vse/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다