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-2 が Template-Part-1 以外で実行された場合 ( View: (Modified)を参照)。Template-Part-1に a を追加し、<tr></tr>その中に Template-Part-2 を配置すると<tr></tr>、エラー メッセージが表示されます。

簡単に言えば、Template-Part-1 に追加される table-row 内の Template-Part-2 のテーブルをネストしようとしています。これにより、上記のエラー メッセージがスローされます。ただし、テーブルの後に Template-Part-2 を独自のテーブル内に配置 (および適切なデータ バインド属性を追加) すると、ネストしたいので、完全に機能します。

質問:テーブル (Template-Part-2) をネストしようとするとエラーが発生する理由を知っている人はいますか? どうすれば修正できますか？バインドをテンプレート化する必要のないものを許可しないノックアウト ルールはありますか?

4

1 に答える 1

1

あなたの問題は文脈になると思います。ビュー全体に $data がありますが、コンテキストに応じて、その $data は異なるオブジェクトになります。ネストされたループに移動するforeachと、$data の値は現在のループのオブジェクトに変更されます。これは私が常に引っかかっていることであり、Knockout Binding Context Documentationが大きな助けになることがわかりました。

<td></td>また、有効な HTML ではないため、テンプレート パート 2に a を追加する必要があります。

<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 に答える