错误消息:消息:无法读取属性' childNodes'为null
模板:(第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之外完成,则模板 - 第2部分有效(参见查看:(已修改))。如果我将<tr></tr>
附加到Template-Part-1并将Template-Part-2放在<tr></tr>
内,则会给出错误消息。
简单地说,我试图在Template-Part-2中将表嵌套在一个表格行中,该表格将附加到Template-Part-1。这会抛出上面的错误消息。但是,如果我将Template-Part-2放在表后面的自己的表中(并添加适当的data-bind属性),我希望将其嵌套,它可以很好地工作。
问题:有谁知道为什么尝试嵌套我的表(Template-Part-2)导致错误?我如何解决它?是否有一些Knockout规则不允许某些不需要绑定的东西被模板化?
答案 0 :(得分:1)
我认为你的问题将是背景。您的视图中包含$ data,但根据上下文,$ data将是不同的对象。当您进入嵌套的foreach
循环时,$ data的值将更改为当前循环的对象。这是我一直被抓住的事情,并且发现Knockout Binding Context Documentation是一个很好的帮助。
此外,您需要向模板第2部分添加<td></td>
,因为它不是有效的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>