如何在淘汰模型迭代中访问数组中的兄弟属性

How to access sibling properties from an array in a knockout model iteration

本文关键字：访问 数组 兄弟 属性 迭代 淘汰 模型      更新时间：2023-09-26

我有一个视图模型，我在其中迭代行和列以动态生成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。

相关文章：