javascript - Knockout js分解一个值的总和

Question

我正在尝试使用 knockout js 来想出最优雅的方法。

假设我需要对 3 个值求和，但结果总和也可以编辑...你会如何使用 knockout js 来做到这一点？

我的思路是在用户编辑总和值时停用组成总和的值，如果总和字段为空则重新激活它们。

请参阅此 jsfiddle 作为起点:http://jsfiddle.net/faHHB/

knockout documentation 中有一个使用计算可观察对象分解字符串的类似示例。 :

function MyViewModel() {
    this.firstName = ko.observable('Planet');
    this.lastName = ko.observable('Earth');

    this.fullName = ko.computed({
        read: function () {
            return this.firstName() + " " + this.lastName();
        },
        write: function (value) {
            var lastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) { // Ignore values with no space character
                this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
                this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
            }
        },
        owner: this
    });
}

ko.applyBindings(new MyViewModel());

编辑 为了更清楚起见，我不确定如何最好地表示这种情况:

假设这 3 个字段代表您的房屋值(value)、汽车值(value)、退休储蓄值(value)，总和代表您 Assets 的总值(value)。

所有字段都应该是可编辑的，如果用户输入了 3 个值，则应该计算总值。也可以直接编辑总值(value)(以防用户有未列出的其他储蓄)。我不确定表示这一点的最佳方式...

当用户编辑合计时，我能想到的选项有:

1. 将总数除以 3 并填充其他值
2. 将输入值置灰，仅当总值为空时才允许用户再次更改。
3. 有一个标记为计算的复选框，勾选时计算值的总和，取消勾选时允许用户编辑。

我想问的是表示这种情况的最佳方式是什么，以及如何使用 knockout 来实现它。如果我不清楚，请道歉。

我现在决定采用方法 3:jsfiddle.net/faHHB/10

Answer 1

您可能想要一个 View 模型:-

将总和作为单独的可观察值

有一个标志来确定是否应该自动计算总和

当 flag 为真时计算 editedTotal 的值，否则只返回当前值。

var testVm = function() {
  var self = this;
  self.items = ko.observableArray();
  self.editedTotal = ko.observable(null);
  self.autoCalculate = ko.observable(true);
  self.calculatedTotal = ko.computed(function() {
     if ( self.autoCalculate() ){
         // Perform sum if still calculating
         var total = 0;

         for ( var i = 0; i < self.items().length ) {
           total += self.items()[i].Amount();  
         }

         self.editedTotal(total);
     }

     return self.editedTotal();
  });  
}

当您检测到对 self.editedTotal 的直接编辑时，将 self.autoCalculate 设置为 false。届时，您的 VM 将不会尝试重新计算，而只会返回跟踪值。