title: Knockout JS - Containerless Control Breaks Foreach using Template
body: <p>Apologies for the long winded title. Hopefully some code will make things clearer.</p>
  
  <p>Before I begin, I am using KnockoutJs version 3.0.0, bootstrap 3 and jquery 1.
  7.1. This issue is related to KnockoutJS.</p>
  
  <p>I have the following html which creates a form based upon my underlying javascript model.</p>
  
  <pre><code>        &lt;form role="form" data-bind="foreach: { data: controls, as: 'control' }" &gt;
          &lt;div class="form-group control-form-group" data-bind="attr:{class: $root.cssControlClassColumnWidth }, visible: control.isVisible"&gt;
              &lt;fieldset class="control-border" data-bind="
                  event:{
                      dragstart: function(control, event) { $root.dragStartControl($parent,control, event) },
                      dragover: function(control, event) { $root.dragOverControl(event) }
                      }"&gt;
                  &lt;legend class="control-border"&gt;
                      &lt;b data-bind="text: control.name"&gt;&lt;/b&gt;
                      &lt;span class="glyphicon glyphicon-remove-circle btn-control-remove text-danger" data-bind="visible: $root.inCustomisationMode,click: $root.removeControl"&gt;&lt;/span&gt;
                  &lt;/legend&gt;
                  &lt;div class="form-inline" data-bind="foreach: {data: parameters, as: 'parameter'}"&gt;
                      &lt;div class="form-group" &gt;
                          &lt;div data-bind="template: { name: parameter.template, data: parameter }"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>This works fine. But when I change the code to the following (adding the containerless controls) my inner foreach loop which uses a template determined by the parameter.template value isn't displayed.</p>
  
  <pre><code>        &lt;form role="form" data-bind="foreach: { data: controls, as: 'control' }" &gt;
          &lt;!-- ko if:true --&gt;         
          &lt;div class="row"&gt;    
          &lt;!-- /ko --&gt;    
              &lt;div class="form-group control-form-group" data-bind="attr:{class: $root.cssControlClassColumnWidth }, visible: control.isVisible"&gt;
                  &lt;fieldset class="control-border" data-bind="
                    event:{
                        dragstart: function(control, event) { $root.dragStartControl($parent,control, event) },
                        dragover: function(control, event) { $root.dragOverControl(event) }
                        }"&gt;
                      &lt;legend class="control-border"&gt;
                          &lt;b data-bind="text: control.name"&gt;&lt;/b&gt;
                          &lt;span class="glyphicon glyphicon-remove-circle btn-control-remove text-danger" data-bind="visible: $root.inCustomisationMode,click: $root.removeControl"&gt;&lt;/span&gt;
                      &lt;/legend&gt;
                      &lt;div class="form-inline" data-bind="foreach: {data: parameters, as: 'parameter'}"&gt;
                          &lt;div class="form-group" &gt;
                              &lt;div data-bind="template: { name: parameter.template, data: parameter }"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;
          &lt;!-- ko if:true --&gt;         
          &lt;/div&gt;    
          &lt;!-- /ko --&gt; 
      &lt;/form&gt;
  </code></pre>
  
  <p>As you can see, all I want to do is add a row (I will add a variable which will control the number of form-groups I add per row once I get this working). This should be trivial, but my inner foreach cannot seem to use the template (see below for an example template).</p>
  
  <pre><code>    &lt;script type="text/html" id="parameterComboBoxTemplate"&gt;
      &lt;label data-bind="text: name"&gt;&lt;/label&gt;
      &lt;select class="input-sm" data-bind="options: values, value: selectedValue"&gt;&lt;/select&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Hopefully someone could shed some light on why I am seeing this odd behaviour.</p>
  
  <p>Let me know if there is anything else I can add to help identify the issue.</p>