代码之家  ›  专栏  ›  技术社区  ›  maciejka

表[duplicate]中两个集合上knockout js中的Foreach迭代

  •  0
  • maciejka  · 技术社区  · 8 年前

    我有下表。

    <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);
        });
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   T.J. Crowder    8 年前

    不,假设 TuDispTexts ApplicationTexts 是平行集合(例如。, TuDispTexts[0] 涉及 ApplicationTexts[0] , TuDispTexts[1] 涉及 ApplicationTexts[1] 等等),您需要创建一个引用这两个元素的计算集合,然后对其进行迭代。

    E、 g.(这是一个 素描 ,不是完美的代码(你可以直接插入到你的项目中):

    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>