淘汰赛，observables 相互更新答案

【问题标题】：knockoutjs, observables updating each other淘汰赛，observables 相互更新
【发布时间】：2013-03-17 10:53:45
【问题描述】：

我有 3 个字段的视图模型

dateStart = ko.observable();
dateEnd = ko.observable();
days = ko.observable();

假设选择了 startDate，只要选择了 endDate，就需要更新天数字段（天数 = endDate - startDate）。

此外，当更新天数字段时，我需要计算 endDate (endDate = startDate + days)。

如何使用 knockoutjs 完成此操作？

谢谢！

我试过了 http://jsfiddle.net/NfG4C/6/，但是我的js总是抛出太多递归异常。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

据我了解，您基本上需要两件事。

您希望在有人选择 "endDate" [假设他们当然选择了 "startDate"]
您希望在有人更改日期时重新计算“endDate”字段 “天”字段

解决此问题的一种方法是使用“可写”计算的 Observable [http://knockoutjs.com/documentation/computedObservables.html]。请通过链接了解详细信息，但一般来说，“可写计算的可观察”是基于某些“其他”可观察的“计算”的东西，反之亦然。

我冒昧地修改了您的小提琴并将“天”更改为计算的可观察量。请看：http://jsfiddle.net/dJQnu/5/

this.days = ko.computed({
    read: function () {
        //debugger;
        // here we simply need to calculate the days as => (days = endDate - startDate)
        if (that.dateStart() && that.dateEnd()) {
            var vacDayCounter = 0;
            for (var curDate = new Date(that.dateStart()); curDate <= that.dateEnd(); curDate = curDate.addDays(1)) {
                if (isDateCountsAsVacation(curDate)) {
                    vacDayCounter++;
                }
            }
            //that.days(vacDayCounter);
            return vacDayCounter;
        }
    },
    write: function (newDays) {
        if (newDays && !isNaN(newDays) && that.dateStart()) {
            var tmpEndDate = new Date(that.dateStart())
            appliedDays = 0;
            while (appliedDays < newDays) {
                if (isDateCountsAsVacation(tmpEndDate)) {
                    appliedDays++;
                }
                tmpEndDate = tmpEndDate.addDays(1);
            }
            if (tmpEndDate) {
                that.dateEnd(tmpEndDate);
            }
        }
    }
});

如果您注意到，我只是将您的代码（逻辑）用于读写部分。在读取期间，我们正在“计算”可观察对象本身的值，在本例中是“天”，而在写入期间（用户更改实际“天”输入值时会触发），我们正在重新计算“dateEnd”字段。

如果您有任何其他问题，请告诉我。

希望这会有所帮助。

谢谢。

【讨论】：

感谢先生的回复）我认为这就是我正在寻找的解决方案。

【解决方案2】：

您会遇到一个递归问题，因为从订阅更新可观察对象时也会触发该可观察对象的订阅方法。

您需要添加第四个成员，updatedFromSubscriber

从一开始就设置为false，在每个订阅方法中添加

if(this.updatedFromSubscriber)
 return;

在更新 observable 之前做

this.updatedFromSubscriber = true

在更新 observable 后将其设置为 false

【讨论】：