0

我有 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 总是抛出太多的递归异常。

4

2 回答 2

3

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

  1. 每当有人选择“endDate”时，您都想计算“days”字段[假设他们当然选择了“startDate”]
  2. 每当有人更改“天”字段时，您都想重新计算“结束日期”字段

解决此问题的一种方法是使用“可写”计算 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”字段。

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

希望这可以帮助。

谢谢。

于 2013-03-17T14:07:16.833 回答
1

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

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

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

if(this.updatedFromSubscriber)
 return;

并且在更新 observable 之前

this.updatedFromSubscriber = true

更新 observable 后将其设置为 false

于 2013-03-17T11:59:51.320 回答