我正在尝试使用Knockout computed在我更改它们时连接两个日期
从示例中,我似乎不需要使用valueUpdate: 'input'
。但是当我更改日期时(使用Bootstrap datepicker)没有任何事情发生。对我缺少的任何想法?
我的代码:
<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());
答案 0 :(得分:2)
由于日期选择器对象的类型为koObservable
,因此您需要将对象视为函数,因此validPeriod
函数应如下所示:
self.validPeriod = ko.computed(function () {
return self.fromDate() + " - " + self.toDate();
}, self);
Knockout.js documentation for observables州:
要读取observable的当前值,只需调用observable即可 没有参数。在此示例中,myViewModel.personName()将返回 'Bob'和myViewModel.personAge()将返回123。
然后我建议使用日期范围元素的text
数据绑定来调用计算函数:
<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。