Knockout.js - 从扩展器或其他方式更改视图模型中的其他可观察对象以执行类似操作

Question

我之前一直在做一些简单的淘汰赛，但这个感觉更复杂。 客户希望能够在下拉菜单的帮助下控制表单中的订单行数（我问他们为什么不想要常规的添加按钮，但他们说这会让他们更好地了解所有内容都已填写...)。

我有一个 observable 保存下拉列表中的值和一个 observableArray 来保存订单行，但是当新值小于以前的值时，我必须确认选择是预期的。

所以我开始在互联网上搜索如何实现这一点的提示和技巧。 首先我找到了this "confirmable" extender。如果他们选择的行数少于之前的值，它会帮助我显示一个确认对话框，但我发现无法从中与视图模型中的其他可观察对象进行交互。

所以我用 Google 搜索了更多内容，并找到了 the first answer from Michael Best here。使用“subscribeChanged”函数，我现在可以（在可确认扩展器完成它的部分之后）向可观察的订单行数组添加或删除行。

但是。我希望有一些更好的方法来实现这一点，以便在多个地方没有几乎完全相同的代码。因为现在我在扩展器中有这段代码

if (!isValidateInteger(current) && isValidateInteger(newValue)) {
    target(newValue);
    // TODO: Add rows to vm.orderRows so the count reflects newValue
}

以及 subscribeChanged 函数中的这段代码

if (!isValidateInteger(current) && isValidateInteger(newValue)) {
    // NOTE: Add rows to vm.orderRows so the count reflects newValue
    difference = (newValueInt - currentInt);
    message += '<br />Add ' + difference + ' row(s).';
    for (var i = 0; i < difference; i++) {
        vm.orderRows().push(new OrderRow());
    }
    vm.orderRows.valueHasMutated();
}

我将this fiddle 与我今天的代码摘录放在一起。

我知道有些 if 语句不需要存在，但它们目前用于调试目的。当功能完成和测试时，我会查看要删除的内容，但欢迎任何指针（即使是与问题无关的指针）。

提前致谢，路德维格

Answer 1

如果可以，您可以使用计算的 observable 来使用确认和更新：

vm.enhancedNumberOfOrderRows = ko.computed({
    read: vm.numberOfOrderRows,
    write: function(newValue) {
        //do all your checks, update vm.numberOfOrderRows only if you want
    }
});

查看示例：http://jsfiddle.net/v3EAz/2/

编辑：如果用户取消更新选择的值，您必须调用 vm.numberOfOrderRows.valueHasMutated();。

见：http://jsfiddle.net/v3EAz/3/

Answer 2

扩展器可能不是最适合您的方案。似乎它让您跳过了不必要的麻烦，并且扩展器逻辑特定于您的视图模型/屏幕，它不是可以在其他情况下重用的通用扩展器。

更简单的方法可能是使用敲除 observable 的 subscribe 函数来监听 numberOfOrderRows 的变化并做出相应的反应。

var vm = {
    numberOfOrderRows: ko.observable(''),
    orderRows: ko.observableArray(),
};

vm.numberOfOrderRows.subscribe(
... todo write a numberOfOrderRowsChanged handler function to do the following:
1) validate the new value
2) perform any user confirmation logic
3) if successful, update the orderRows observable
4) if unsuccessful, restore the previous value to numberOfOrderRows