Question

在我的项目中使用时刻datepicker，我无法看到我的错误在哪里。基本上我想要做的是为源属性做一个suscription，以便知道属性何时更改（加载到服务方法的时间）。接下来，我可以构建一个基本的例子：

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/

上面的代码很简单并且有效，我的麻烦从我的生产代码开始，由于一些奇怪的原因，不会触发对suscription实现的代码。简短示例（在生产代码中我是打字稿）：

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

}

Answer 1

在数据绑定中，您有：

datepicker: toDate()

由于toDate是一个可观察的，因此调用toDate()会获得observable的值，因此您传递的不是传递observable本身。

尝试将绑定更改为：

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
}

...您正在用新的observable替换toDate和fromDate属性，这些observable没有应用原始observable所做的订阅。尝试在创建这些可观察对象之后附加订阅，或者可能不是创建新的可观察对象，只需填充它们：

function loadInitData() {
    var focusDate = ko.observable(new Date('2013/07/06'));
    exports.fromDate(firstDayOfMonth(focusDate));
    exports.toDate(getLastDayOfMonth(focusDate));
    // calls to services
}

moment datepicker：订阅KOH属性

1 个答案: