Nested Table seems to be causing null childnodes error

Question

Error Message: Message: Cannot read property 'childNodes' of null

Template: (Part 1)

<tr>
    <td><input type="text" data-bind="value: $data.Mark" /></td>
    <td><input type="number" step="1" data-bind="value: $data.Quantity" /></td>
    <td><input type="text" data-bind="value: $data.Description" /></td>
    <td><input type="text" data-bind="value: $data.Type" /></td>
    <td><input type="number" data-bind="value: $data.BaseLength" /></td>
    <td><input type="number" data-bind="value: $data.TCXLNumber" /></td>
    <td><input type="number" data-bind="value: $data.TCXLLength" /></td>
    <td><input type="number" data-bind="value: $data.TCXRNumber" /></td>
    <td><input type="number" data-bind="value: $data.TCXRLength" /></td>
    <td><input type="number" data-bind="value: $data.SeatDepthLeft" /></td>
    <td><input type="number" data-bind="value: $data.SeatDepthRight" /></td>
    <td><input type="number" data-bind="value: $data.BCXCount" /></td>
    <td><input type="number" data-bind="value: $data.Uplift" /></td>
    <td data-bind="foreach: $data.Remarks">
        <input type="text" data-bind="value: $data" />
    </td>
    <td><button class="w100 round alert deleteEntity">Delete</button></td>
</tr>

Template: (Part 2)

<tr>
    <table>
        <thead>
            <tr>
                <th colspan="3">LoadInfo</th>
                <th colspan="2">Load1</th>
                <th colspan="2">Load2</th>
                <th rowspan="2"></th>
            </tr>
            <tr>
                <th>Type</th>
                <th>Category</th>
                <th>Position</th>
                <th>Value</th>
                <th>Distance</th>
                <th>Value</th>
                <th>Distance</th>
            </tr>
        </thead>
        <tbody data-bind="template: { name: 'LoadInfoTableTemplate', foreach: $data.LoadInfos }">
        </tbody>
    </table>
</tr>

View: (Original)

<form>
    <table class="grid">
        <thead data-bind="template: { name: 'JoistsTableHeaderTemplate', with: $data[0] }"></thead>
        <tbody data-bind="template: { name: 'JoistsTableBodyTemplate', foreach: $data }"></tbody>
    </table>
</form>

View: (Modified)

<form>
    <table class="grid">
        <thead data-bind="template: { name: 'JoistsTableHeaderTemplate', with: $data[0] }"></thead>
        <tbody data-bind="template: { name: 'JoistsTableBodyTemplate', foreach: $data }"></tbody>
    </table>
    <table data-bind="foreach: $data" style="display:none;">
        <thead>
            <tr>
                <th colspan="3">LoadInfo</th>
                <th colspan="2">Load1</th>
                <th colspan="2">Load2</th>
                <th rowspan="2"></th>
            </tr>
            <tr>
                <th>Type</th>
                <th>Category</th>
                <th>Position</th>
                <th>Value</th>
                <th>Distance</th>
                <th>Value</th>
                <th>Distance</th>
            </tr>
        </thead>
        <tbody data-bind="template: { name: 'LoadInfoTableTemplate', foreach: $data.LoadInfos }">
        </tbody>
    </table>
</form>

Explanation:

Template-Part-1 works perfectly and loads using Knockout perfectly. Template-Part-2 if done outside of Template-Part-1 works (see View: (Modified)). If I append a <tr></tr> to Template-Part-1 and place Template-Part-2 inside of the <tr></tr> then the error message is given.

Simply put, I am trying to nest the table in Template-Part-2 inside a table-row that will be appended to Template-Part-1. This throws the Error Message above. If I however, place Template-Part-2 inside its own table after the table (and add appropriate data-bind attribute) I wish to nest it in, it works perfectly.

Question: Does anyone know why trying to nest my table (Template-Part-2) is causing the error? How do I fix it? Is there some Knockout Rule that doesn't allow something that doesn't require a bind to be templated?

Answer 1

I think your problem will be the context. You have $data all over your views but depending on the context, that $data will be different objects. As you move into nested foreach loops the value of $data will change to the object of the current loop. This is something that I get caught on all the time and ahve found that Knockout Binding Context Documentation is a great help.

Also you will need to add a <td></td> to template part 2 as it wont be valid html.

<tr>
  <td>
    <table>
        <thead>
            <tr>
                <th colspan="3">LoadInfo</th>
                <th colspan="2">Load1</th>
                <th colspan="2">Load2</th>
                <th rowspan="2"></th>
            </tr>
            <tr>
                <th>Type</th>
                <th>Category</th>
                <th>Position</th>
                <th>Value</th>
                <th>Distance</th>
                <th>Value</th>
                <th>Distance</th>
            </tr>
        </thead>
        <tbody data-bind="template: { name: 'LoadInfoTableTemplate', foreach: $data.LoadInfos }">
        </tbody>
    </table>
  </td>
</tr>