title: knockout foreach in the middle of a table
body: <p>I have a table like so:</p>
  
  <pre><code>&lt;table&gt;
   &lt;thead&gt;
    &lt;tr&gt;
     &lt;td&gt;Column 1&lt;/td&gt;&lt;td&gt;Column 2&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
    &lt;tr&gt;
     &lt;td&gt;static 1a&lt;/td&gt;&lt;td&gt;static 2a&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;dynamic 1b&lt;/td&gt;&lt;td&gt;dynamic 2b&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;dynamic 1c&lt;/td&gt;&lt;td&gt;dynamic 2c&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>The dynamic fields need to be a knockout foreach to iterate all the properties of the object.  The only thing I can think to do is something like:</p>
  
  <pre><code>    &lt;tbody data-bind="foreachprop: properties"&gt;
          &lt;tr&gt;&lt;td&gt;&lt;span data-bind="text: propertyName"&gt;&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;span data-bind="text: value"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  </code></pre>
  
  <p>Which technically works, but it screws with my styling because the static row should be part of the tbody.  What else can I bind to the for each?  I must be missing a simple solution.</p>
  
  <p><strong>update</strong>: I'm actually not using "foreach", I'm using a custom function that iterates through the properties.  When I try to use &lt;!-- ko foreachprop:&gt; properties -- I get the following console error:</p>
  
  <blockquote>
    <p>Uncaught Error: The binding 'foreachprop' cannot be used with virtual
    elements</p>
  </blockquote>
  
  <p>Here is the foreachprop function</p>
  
  <pre><code>ko.bindingHandlers.foreachprop = {
      transformObject: function (obj) {
          var properties = [];
          for (var key in obj) {
              if (obj.hasOwnProperty(key)) {
                  var newObj = obj[key];
                  newObj.propertyName = key;
                  properties.push(newObj);
              }
          }
          return properties;
      },
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          var value = ko.utils.unwrapObservable(valueAccessor()),
              properties = ko.bindingHandlers.foreachprop.transformObject(value);
          ko.applyBindingsToNode(element, { foreach: properties });
          return { controlsDescendantBindings: true };
      }
  };
  </code></pre>