0

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

模板:(第 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>

模板:(第 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>

查看:(原文)

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

解释:

Template-Part-1 完美运行,并完美使用 Knockout 加载。如果在 Template-Part-1 工作之外完成 Template-Part-2(请参阅View: (Modified))。如果我将 a 附加<tr></tr>到 Template-Part-1 并将 Template-Part-2 放在其中,<tr></tr>则会给出错误消息。

简而言之,我试图将 Template-Part-2 中的表格嵌套在将附加到 Template-Part-1 的表格行中。这会引发上面的错误消息。但是,如果我将 Template-Part-2 放在自己的表中,放在表之后(并添加适当的 data-bind 属性),我希望将它嵌套进去,它可以完美地工作。

问题:有谁知道为什么试图嵌套我的表(模板-第 2 部分)会导致错误?我如何解决它?是否有一些淘汰规则不允许不需要绑定的东西被模板化?

4

1 回答 1

1

我认为你的问题将是上下文。您的视图中都有 $data ,但根据上下文, $data 将是不同的对象。当您进入嵌套foreach循环时,$data 的值将更改为当前循环的对象。这是我一直被抓住的东西,我发现Knockout Binding Context Documentation是一个很大的帮助。

此外,您还需要在<td></td>模板第 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>
于 2014-04-16T22:51:51.630 回答