knockout.js 为什么我的Knockoutjs Computed Observable在我的Observable数组被排序时不起作用?

bqucvtff  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(170)

背景信息

我有一个Observable数组,其中包含三个项目细节。Item、Group、TotalQTY和InputQty。当用户输入的输入数量与Total Quantity匹配时,该项目将被“验证”,这意味着它将变灰并移动到列表底部。这是通过HTML中的JavaScript排序函数完成的(请参阅下面的代码片段)

<tbody data-bind="foreach: ItemsByGroupArray().sort(function (l, r) { return l.Verified() == r.Verified() ? 0 : (l.Verified() < r.Verified() ? -1 : 1 ) } )">   
        <tr data-bind="css: {'verified-item': Verified }">
            <td data-bind="text: $index() + 1"></td>
            <td data-bind="text: ITEM"></td>
            <td data-bind="text: GROUP"></td>
            <td>
                <input type="number" data-bind="value: InputQTY, valueUpdate: ['afterkeydown', 'input']"
                       size="4" min="0" max="9999" step="1" style=" width:50px; padding:0px; margin:0px">                        
            </td>
            <td data-bind="text: TotalQTY"></td>
        </tr>
    </tbody>

在对数组进行排序时,会处理一个经过计算的可观察值。此可观察值用于检查ItemsByGroupArray中的每个InputQTY是否与TotalQTY匹配。如果匹配,则Item Detail将标记为已验证。(请参阅代码段)

self.ITEMInputQTYs = ko.computed(function () {
    return ko.utils.arrayForEach(self.ItemsByGroupArray(), function (item) {
        if (item.InputQTY() == item.TotalQTY()) {
            item.Verified(true);
        } else {
            item.Verified(false);
        }
    });
});

包含代码段的可执行代码:
第一个
问题所在
这里的问题是,如果您运行小提琴并执行以下步骤,“Item 3”将不会得到验证。
1.双击“料件1”的“输入数量”,并将其变更为值10。结果:已验证Item 1。
1.双击“条目2”的“输入数量”,并将其值更改为10。结果:未验证Item 2。
1.双击“条目3”的“输入数量”,并将其值更改为10。结果:Item 2得到验证,但Item 3没有。

我的问题

为什么第三个项目没有按预期计算,我该如何修复这个问题?还有,这是Knockoutjs代码中可能的bug吗?
提前感谢您的回复!

gj3fmq9x

gj3fmq9x1#

这个方法只工作一次,因为knockout是如何选取它初始计算的变量的。但是实际上需要的是每当一个项的属性改变时触发observableArray。我已经在AddItem部分添加了额外的代码来解决这个问题。
第一个

相关问题