我有一个视图模型,我在其中迭代行和列以动态生成HTML表。rows[]
数组的第一行将是一个包含列标题的简单字符串数组;后续行将包含一个对象,该对象保存列数据,以及关于该行的元数据(即该行的sobjectid
)。
如何访问html/视图中的对象?我在foreach: rows
迭代和foreach: columns
迭代中玩过Knockout的$data
和$parent
绑定上下文变量,但没有成功。
JS小提琴
var viewModel = {
id: 'Account1',
heading: 'Account',
rows: ko.observableArray()
};
ko.applyBindings(viewModel);
// Ajax data populates viewModel structure...
// Header row
viewModel.rows.push(['Name', 'Title', 'Position']);
for (var i = 0; i < 3; i++) {
viewModel.rows.push({
sobjectId: i,
sobjectType: 'Account',
columns: ['Matt' + i, 'Sr.', 'Software Engineer']
});
}
<table data-bind="foreach: rows">
<!-- ko if: $index() === 0 -->
<thead>
<tr data-bind="foreach: $data">
<th data-bind="text: $data"></th>
</tr>
</thead>
<!-- /ko -->
<!-- ko ifnot: $index() === 0 -->
<tbody>
<tr data-bind="foreach: columns">
<td data-bind="text: $data"></td>
</tr>
</tbody>
<!-- /ko -->
</table>
在foreach: columns
里面你可以使用$parent.sobjectId
来访问你的属性
JSFiddle演示。
或者如果你将foreach
移动到tr
中并使用注释语法,那么你可以只写data-bind="text: sobjectId"
:
<tr>
<th>Subject Id</th>
<!-- ko foreach: $data -->
<th data-bind="text: $data"></th>
<!-- /ko -->
</tr>
和
<tr>
<td data-bind="text: sobjectId"></td>
<!-- ko foreach: columns -->
<td data-bind="text: $data"></td>
<!-- /ko -->
</tr>
演示JSFiddle。