knockout.js 바인딩을 사용하여 래퍼 div를 삽입 할 수 있습니까? foreach

Question

<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 주위에 래퍼를 삽입하려면 일부 캐스에서 필요합니다.

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

나는 그것이 바람직하다고 생각합니다.

Answer 1

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