javascript - 如何使用 Knockout JS 计算两个日期？

Question

我正在尝试使用 Knockout computed在我更改它们时连接两个日期。
从示例来看，我似乎不需要使用 valueUpdate: 'input'。但是当我更改日期(使用 Bootstrap datepicker)时没有任何反应。对我所缺少的有什么想法吗？

Here's my fiddle.

还有我的代码:

<div class="input-append date">
    <input type="text" data-bind="value: fromDate, valueUpdate: 'input'" class="date from-date" /> 
    <span class="add-on">to</span>
    <input type="text" data-bind="value: toDate, valueUpdate: 'input'" class="date to-date" />
</div>
Dato: <span class="date" data-bind="date"></span>


function dateModel() {
    var self = this;
    self.fromDate = ko.observable('12.09.2014');
    self.toDate = ko.observable();

    self.validPeriod = ko.computed(function () {
        return self.fromDate + " - " + self.toDate;
    }, self);
}

ko.applyBindings(dateModel());

Answer 1

因为您的日期选择器对象是 koObservable 类型，您需要将这些对象视为函数，所以您的 validPeriod 函数应该如下所示:

self.validPeriod = ko.computed(function () {
    return self.fromDate() + " - " + self.toDate();
}, self);

Knockout.js documentation for observables状态:

To read the observable’s current value, just call the observable with no parameters. In this example, myViewModel.personName() will return 'Bob', and myViewModel.personAge() will return 123.

然后我会建议使用日期跨度元素的 text 数据绑定(bind)来调用计算函数:

<span class="date" data-bind="text: validPeriod"></span>

感谢@Buck Doyle 的评论和一些研究，Knockout.js 似乎需要特殊处理日期时间选择器控件，如this SO post - jQuery UI datetimepicker and Knockout.js 所示。 - 一种可能的解决方案是为 KOjs 实现自定义日期时间选择器处理。

This page - custom bindings with KOjs很好地(通过示例)解释了如何 bind the datetime picker control .