1

我正在尝试使用淘汰赛 js 来考虑最优雅的方法。

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

我正在考虑设置在用户编辑总和值时停用构成总和的值并在总和字段为空白时重新激活它们。

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

敲除文档中有一个类似的使用计算的 observable 分解字符串的示例：

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 个字段代表您的房屋价值、汽车价值、退休储蓄价值，总和代表您资产的总价值。

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

当用户编辑总数时，我能想到的选项是：

  1. 将总数除以 3 并填充其他值
  2. 将输入值置灰，只允许用户在总值为空时再次更改。
  3. 有一个标记为计算的复选框，它在勾选时对值求和，并在未勾选时让用户进行编辑。

我试图询问表示这种情况的最佳方法是什么，以及如何使用淘汰赛来实现它。如果我不清楚，请道歉。

我现在已经选择了方法 3：jsfiddle.net/faHHB/10

4

2 回答 2

2

您应该使用读/写计算，但最重要的是定义如何解析总和的规则。例如，当 sum 更改时，您只能更新 val1：

var ViewModel = function() {
    var self = this;
    self.val1 = ko.observable(30);
    self.val2 = ko.observable(20);
    self.val3 = ko.observable(10);


    self.sum = ko.computed({
        read: function() {
            return parseInt(self.val1()) + parseInt(self.val2()) + parseInt(self.val3());
        },
        write: function(value) {
            self.val1(parseInt(value) - parseInt(self.val2()) - parseInt(self.val3()));
        }
    });
};

这是工作小提琴：http: //jsfiddle.net/vyshniakov/faHHB/1/

当用户更改总和时，您希望实现什么行为？

于 2012-10-31T09:41:23.793 回答
2

您可能想要一个视图模型：-

将总和作为单独的 observable 保存

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

当标志为真时计算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();
  });  
}

When you detect a direct edit on self.editedTotal, set self.autoCalculate to false. At that point, your VM will not attempt to recalculate, and will just return the tracked value.

于 2012-10-31T09:43:40.093 回答