Knockout.js - 如何修改可观察的 JS 日期对象？答案

【问题标题】：Knockout.js - How to modify an observable JS Date object?Knockout.js - 如何修改可观察的 JS 日期对象？
【发布时间】：2014-08-27 20:25:47
【问题描述】：

我有一个 ko.observable 像这样处理一个 JS Date 对象：

vm.date = ko.observable(new Date());

我需要一个简单的函数，可以将日期增加或减少 x 天。像这样：

vm.changeDay = function(x) {
  // I want this function to increase or decrease date by x days each time it is called.
};

我当前实现的问题是 vm.date observable 不会在我的视图中更新。这可能是因为 JS Date 对象不仅仅是一个简单的字符串，并且需要以特定的方式分解并组合在一起才能被观察到。我尝试使用 ko.computed 来执行此操作，但没有成功。

有关问题的简单概述，请参见 jsfiddle： http://jsfiddle.net/tp6jb4x1/

【问题讨论】：

不确定你能做到这一点：data-bind="click: changeDay(-1)"，更新你的小提琴工作：jsfiddle.net/tp6jb4x1/1
data-bind="click: function(){ changeDay(-1); }"

标签： javascript date knockout.js

【解决方案1】：

您可以像这样在 KO 中传递参数：

<button data-bind="click: changeDay.bind($data,'-1')">Prev day</button>
<button data-bind="click: changeDay.bind($data,'1')">Next day</button>

见参考：Passing parameter using onclick or a click binding with KnockoutJS

【讨论】：

【解决方案2】：

日期逻辑有点不明显，所以我更新了你的小提琴：

http://jsfiddle.net/tp6jb4x1/3

相关部分：

... data-bind="click: changeDay.bind($data, 1)" ...

self.changeDay = function(dayDelta) {
    var d = this.date();
    d.setDate(d.getDate() + dayDelta);
    this.date(new Date(d.getTime()));
};

您使用可计算的方法可能有效，但日期逻辑可能有误。我喜欢尽可能使用可写的计算 observable，而不是更复杂的函数调用。

【讨论】：

注意：我强烈建议只使用moment js 进行日期逻辑。很不错的图书馆。