javascript - 在表中同时对两个集合进行 knockout JS中的Foreach迭代

Question

这个问题已经有答案了:

Data-bind: {foreach: ...} for multiple arrays (1 个回答)

已关闭 5 年前。

我有下表。

<tbody data-bind="foreach: TuDispTexts, foreach: ApplicationTexts">
    <tr>
        <td data-bind="text: DictionaryTextId"></td>
        <td><input data-bind="value: TuDispTexts.Culture" type="text"/></td>
        <td><input data-bind="value: TuDispTexts.DictionaryValue" type="text" /></td>
        <td><input data-bind="value: ApplicationTexts.DictionaryValue" type="text" /></td>
    </tr>
</tbody>

是否可以像我介绍的那样一次迭代两个集合并按名称访问两个集合？建议的解决方案不起作用。

定义模型的函数。

function tuDispModel() {
        this.AetrState = ko.observable();
        this.TuDispTexts = ko.observable;
        this.ApplicationTexts = ko.observable();

        this.texts = ko.pureComputed(function () {
            return tuDispInfo.TuDispTexts.map(function (tu, index) {
                return { tu: tu, app: tuDispInfo.ApplicationTexts[index] };
            });
        })

; }

调用顺序。

$(document).ready(function () {
        tuDispInfo = new tuDispModel();
        getTuDispData(corewebApiUrl, tuDispId);
        ko.applyBindings(tuDispInfo);
    });

Answer 1

没有。假设 TuDispTexts 和 ApplicationTexts 是并行集合(例如，TuDispTexts[0] 与 ApplicationTexts[0] 相关， TuDispTexts[1] 与 ApplicationTexts[1] 等相关)，您需要创建一个引用它们的计算集合，然后对其进行迭代。

例如(这是一个草图，不是完美的代码，您可以直接将其放入您的项目中):

vm.texts = ko.pureComputed(function() {
    return vm.TuDispTexts.map(function(tu, index) {
        return {tu: tu, app: vm.ApplicationTexts[index]};
    });
});

...然后

<tbody data-bind="foreach: texts">
    <tr>
        <td data-bind="text: /*Unclear where this comes from: DictionaryTextId*/"></td>
        <td><input data-bind="value: texts.tu.Culture" type="text"/></td>
        <td><input data-bind="value: texts.tu.DictionaryValue" type="text" /></td>
        <td><input data-bind="value: texts.app.DictionaryValue" type="text" /></td>
    </tr>
</tbody>