Knockout.js 嵌套表似乎导致了null childnodes错误

错误消息：消息：无法读取null的属性“childNodes”

模板：（第1部分）

删除

模板：（第二部分）

装载信息
载荷1
负载2
类型
类别
位置
价值
距离
价值
距离

查看：（原件）

视图：（已修改）

装载信息
载荷1
负载2
类型
类别
位置
价值
距离
价值
距离

说明：

模板-Part-1可以完美地工作，并且可以完美地使用敲除器加载。如果在模板第1部分工程范围外进行模板第2部分（见视图：（修改））。如果我将

附加到Template-Part-1中，并将Template-Part-2放在

中，则会给出错误消息

简单地说，我正在尝试将Template-Part-2中的表嵌套在将附加到Template-Part-1的表行中。这会抛出上面的错误消息。但是，如果我将Template-Part-2放在我希望嵌套它的表之后它自己的表中（并添加适当的数据绑定属性），那么它就可以完美地工作

---

问题：有人知道为什么试图嵌套我的表（模板第2部分）会导致错误吗？我怎么修理它？是否有一些淘汰规则不允许不需要绑定的东西被模板化

我认为你的问题将是背景。视图中到处都有$数据，但根据上下文的不同，$数据将是不同的对象。当您进入嵌套的

foreach

循环时，$data的值将更改为当前循环的对象。这件事我一直都很了解，我发现这对我很有帮助

此外，您还需要将

添加到模板第2部分，因为它不是有效的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>

装载信息
载荷1
负载2
类型
类别
位置
价值
距离
价值
距离

您是否能够创建一个JSFIDLE来帮助解释这个问题。我几乎可以肯定这是丢失的原因

我不敢相信我忽略了这一点。我确信我的上下文是正确的，因为这是我遇到问题时检查的第一件事。检查了10次。我没有在atm机上工作，所以我不能说100%，但我几乎可以肯定这就是问题所在。谢谢。这肯定是问题所在，我还是不敢相信我忽略了这一点：/谢谢。

<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>

<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>

<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>

<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>