javascript - 如何在 knockout 模型迭代中从数组访问同级属性

我有一个视图模型，在其中迭代行和列以动态生成HTML表。 rows[]数组的第一行将是一个包含列标题的简单字符串数组；后续行将包含一个对象，该对象保存列数据以及有关该行的元数据（即该行的sobjectid）。

如何在html / view中访问sobjectid？我在$data迭代和$parent迭代中尝试了Knockout的foreach: rows和foreach: columns binding context variables，但没有成功。

JS Fiddle

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。