背景信息
我有一个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吗?
提前感谢您的回复!
1条答案
按热度按时间gj3fmq9x1#
这个方法只工作一次,因为knockout是如何选取它初始计算的变量的。但是实际上需要的是每当一个项的属性改变时触发observableArray。我已经在AddItem部分添加了额外的代码来解决这个问题。
第一个