Render container conditionally

Question

Is it possible to render container for a template based on condition with knockout.js?

This does not work, but shows what i want to do:

<div data-bind="foreach: items">
 <!-- ko if: $data.startContainer -->
 <div class="container">
 <!-- ko -->

 <div data-bind="html: $data.contentElement"></div>

 <!-- ko if: $data.endContainer -->
 </div>
 <!-- ko -->
</div>

Answer 1

Found a thread on knockout.js github site that indicates this as not possible with the native templating model: https://github.com/SteveSanderson/knockout/issues/307

Apparently, the closing comment is understand as internal to the not closed div tag.

My hopes were on the dynamic templates, but failed also like shown in the fiddle.

http://jsfiddle.net/XbdGs/3/

<script type="text/html" id="withContainer">
     <div class="container">
         <!-- ko template: 'withoutContainer' -->
         <!-- /ko -->
     </div>
</script>

From that i conclude you can try the 3 foreachs solution, use Posthuma suggestion or fallback to another templating engine like jquery.tmpl or Underscore as mentioned on knockout documentation.

http://knockoutjs.com/documentation/template-binding.html