我可以用knockout.js綁定注入包裝div嗎foreach

<div id="metro-scrollbar" data-bind="foreach: data.sections , visible: data.sections.length > 0"> 
    <section data-bind="foreach: $data.tiles, visible: $data.tiles.length > 0, css: { 'last' : $parent.isLastSection($index)}"> 
     <div data-bind="attr : {'class' : $root.getClass($data,$parentContext.$index,$index)} "> 

      <div data-bind="attr : {'class' : $root.getAspectClass($data,$index)} "></div> 
      <div class="live-tile"> 
       <span class="tile-title" data-bind="text: title, css:{'big' : bigtitle}"></span> 
       <div> 
        <p>a</p> 
       </div> 
      </div> 
     </div> 
    </section> 
</div>

我有上面的綁定。我需要在一些賭注中爲內部div注入包裝。我可以用knockout.js綁定注入包裝div嗎foreach

<div> 
    <section> 
     <-- if $myFunction() inject <div> --> 
     <div> 
      <div></div> // THIS IN HERE SHOULD BE THERE ALWAYS: 
      <div >  // THIS IN HERE SHOULD BE THERE ALWAYS: 
      </div>  // THIS IN HERE SHOULD BE THERE ALWAYS: 
     </div> 
     <-- if $myFunction() inject </div> --> 
    </section> 
</div>

我希望它是有道理的。

來源

2012-10-19 Poul K. Sørensen

如果可能，從而爲內部div的模板，模板爲注入的div。注入的div的模板應該調用innerdivs的模板。然後基於myFunction使用兩個模板中的任何一個。可能？ –

對不起，我不清楚你想要做什麼。那麼你想要做的是添加一些元素來包裝'section'元素的子元素？ –

s093294有正確的想法。這裏是（和jsFiddle）解決方案的一個例子：

查看

<button data-bind="click: click">Toggle</button> 

<section data-bind="template: { name: templateName }"></section> 

<script type="text/html" id="outer-tmpl"> 
    <div data-bind="template: { name: 'inner-tmpl' }"> 
    </div> 
</script> 
<script type="text/html" id="inner-tmpl"> 
    <div>first inner div</div> 
    <div>second inner div</div> 
</script>

型號

viewModel = { 
    toggle: new ko.observable(true), 
    templateName: function() { 
     return viewModel.toggle() ? 'outer-tmpl' : 'inner-tmpl'; 
    }, 
    click: function() { 
     viewModel.toggle(!viewModel.toggle()); 
    } 
} 
ko.applyBindings(viewModel);

來源

2012-10-19 02:51:08 Hullah

我可以用knockout.js綁定注入包裝div嗎foreach

回答

相關問題