javascript - knockoutjs，可观察对象相互更新

Question

我有包含 3 个字段的 View 模型

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

假设选择了 startDate，则每当选择 endDate 时，天数字段都需要更新(天数 = endDate - startDate)。

此外，当更新天数字段时，我需要计算结束日期(结束日期 = 开始日期 + 天数)。

如何使用 knockoutjs 来完成此操作？

谢谢!

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

Answer 1

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

1. 您希望在有人选择时计算“天”字段 “endDate” [假设他们当然选择了“startDate”]
2. 每当有人更改“endDate”字段时，您都希望重新计算“endDate”字段 “天”字段

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

我冒昧地修改了你的 fiddle 并将“天”更改为计算的可观察值。请看一下: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”字段。

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

希望这有帮助。

谢谢。