1

在我的项目中使用时刻日期选择器我看不到我的错误在哪里。基本上我想要做的是订阅源属性,以便知道属性何时更改(加载到服务方法的时间)。因此,按照一些网址,我能够构建这个基本示例:

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');    
});

}
4

1 回答 1

3

在您的数据绑定中,您有:

datepicker: toDate()

由于toDate是一个可观察对象,因此调用toDate()会为您获取可观察对象的,因此您要传递它而不是传递可观察对象本身。

尝试将绑定更改为:

datepicker: toDate

这将使datepicker绑定处理程序能够更新您的 observable。

更新

我认为这是你的第二个问题。在这个函数中:

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
}

...您正在用新的 observables 替换toDateandfromDate属性,这些 observables 没有应用原始 observables 所做的订阅。在创建这些可观察对象后尝试附加订阅,或者可能不创建新的可观察对象,而是填充它们:

function loadInitData() {
    var focusDate = ko.observable(new Date('2013/07/06'));
    exports.fromDate(firstDayOfMonth(focusDate));
    exports.toDate(getLastDayOfMonth(focusDate));
    // calls to services
}
于 2013-06-18T17:36:57.417 回答