title: Dynamic template handing with Knockout.js
body: <p>I'm trying to make a table component in Knockout that can render arbitrary columns in a way that still uses Knockout for cell contents.  I'm passing an array of column definition objects into the component and an array of arbitrary row objects.  Then, I have a nested foreach structure that looks a bit like this:</p>
  
  <pre><code>&lt;tbody data-bind="foreach: {data:rows, as:'row'}"&gt;
    &lt;tr data-bind="foreach: $parent.columns"&gt;
      &lt;td data-bind="html:renderCell(row)"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>With this, I can allow the 'renderCell' function for each column to return some html to go in the cell, given the context of the row viewModel.  </p>
  
  <p>However, what I <em>really</em> want is to be able to return a Knockout template for the cell.  I don't want to use <code>&lt;script type="text/html" id="xyz"&gt;</code> style templates because it doesn't suit this particular application, but I can't figure out how to get Knockout to treat the output from renderCell() as a template string.  </p>
  
  <p>How can I do something like the following and make it work?</p>
  
  <pre><code>&lt;td data-bind="template:{fn: renderCell(row)}"&gt;&lt;/td&gt;
  </code></pre>
  
  <p>I'd like to use other components like  and other bindings in the output of the renderCell function.  </p>