Is there a way to combine Child Rows with Knockout.js Bindings?

VicJo

So, I'm using Knockout to iterate through an array of objects to inject the html elements (aka, the tr's) needed to create the DataTable.

An example is:

< !-- ko foreach: foo -->
    <tr>
        <td data-bind="text: id"></>
        <td data-bind="text: description"></td>
    </tr>
<!-- /ko -->

This create a two-column row with the 'id' property of each 'foo' as the text of the first and the 'description' property as the second.

This works great. Here's where it gets funky, I'm trying to use DataTable's child rows so that I can include more information about my 'foo' objects when a user clicks on the row, as is done on this page:
https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html

but this function that adds extra elements to the html will not work for me, as all html elements that are bound to my Knockout object require the 'data-bind' attribute function and for the 'data-bind' attribute to work, they must all be present when the view model object is bound to the page (during the time of initial page rendering, and before the DataTable is created.)

Is there a way I could use the DataTable initializer to include a child element for all of my rows that would include this data-bind attribute, instead of inject html elements every time I click on the row, or to create rows that are already linked to one another and not separated when the DataTable is created?