在我的项目中使用时刻日期选择器我看不到我的错误在哪里。基本上我想要做的是订阅源属性,以便知道属性何时更改(加载到服务方法的时间)。因此,按照一些网址,我能够构建这个基本示例:
var model = {
test_date: ko.observable(new Date('2012/12/12'))
};
ko.applyBindings(model, $("#target")[0]);
model.test_date.subscribe(function (newValue) {
alert("new selection :" + newValue);
});
http://jsfiddle.net/rolandomartinezg/x7Zt3/5/
上面的代码很简单并且有效,我的麻烦始于我的生产代码,由于某种奇怪的原因,订阅的代码没有被触发。简短示例(在生产代码中我是打字稿):
export var fromDate = ko.observable(new Date('2012/12/12'));
fromDate.subscribe(function (newValue) {
alert("new selection of date");
});
我尝试从我的 jsfiddle 示例和生产代码中找到一些缺失的参考,并且两者都使用相同的库(moment.js、moment-datepicker.js、moment-datepicker-ko.js、/knockout.js。我做错了什么? 任何提示?
更新 1:我的生产代码从 typescript 转换为 js:
define(["require", "exports", 'services/logger', '../../services/Assessment/datacontext'], function(require, exports, __logger__, __datacontext__) {
var logger = __logger__;
var datacontext = __datacontext__;
exports.title = 'AssessmentListing';
exports.fromDate = ko.observable(new Date('2012/12/12'));
exports.toDate = ko.observable(new Date('2012/12/12'));
function activate() {
loadInitData();
}
exports.activate = activate;
function loadInitData() {
var focusDate = ko.observable(new Date('2013/07/06'));
exports.fromDate = ko.observable(firstDayOfMonth(focusDate));
exports.toDate = ko.observable(getLastDayOfMonth(focusDate));
// calls to services
}
function getLastDayOfMonth(focusDate) {
var d = new Date(Date.apply(null, focusDate));
d.setMonth(d.getMonth() + 1);
d.setDate(0);
return d;
}
function firstDayOfMonth(focusDate) {
var d = new Date(Date.apply(null, arguments));
d.setDate(1);
return d;
}
exports.toDate.subscribe(function (newValue) {
alert("new selection :");
});
exports.fromDate.subscribe(function (newValue) {
alert("new selection");
});
function viewAttached() {
}
exports.viewAttached = viewAttached;
})
更新 2:我的观点
<div class="span4">
<span><small>From Date:</small> </span>
<div class="input-append date" id="fromDate" >
<input id="fromDatePicker" type="text" data-bind="datepicker: fromDate()" class="input-small">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<span><small>To Date: </small></span>
<div class="input-append date" id="ToDate" >
<input id="toDatePicker" type="text" data-bind="datepicker: toDate()" class="input-small">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
更新 3 尝试使用 changeDate 不起作用,因为 ev.date 不可用。
export function viewAttached() {
$('#fromDatePicker').datepicker()
.on('changeDate', function (ev) {
/*ev.date doesn't work*/
alert('fromdate has changed');
});
}