Knockout v.3：在包含对象的全局级别订阅可观察对象

Question

当任何可观察对象被更新时，我在更新对象订阅时遇到了一些问题。

这是我正在使用的模型：

searchModel = function (startDate, endDate, searchTerm) {
var self = this;
self.StartDate = ko.observable(startDate);
self.EndDate = ko.observable(endDate);
self.SearchTerm = ko.observable(searchTerm);
};

这是我用来更新日期选择器的可观察对象的绑定处理程序：

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options).on("changeDate", function (ev) {
            var observable = valueAccessor();
            observable(ev.date);
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).datepicker("setValue", value);
    }
};

这是我用来初始化和订阅搜索模型的扩展函数：

ko.extenders.getEvents = (function (target, options) {
    function getEvents(target) {
        console.log(target);
    };

    getEvents(target());
    target.subscribe(getEvents);

    return target;
});

任何帮助将不胜感激...简而言之，我希望页面使用默认的可观察模型值（如下）进行初始化，并且每当对象中的任何可观察对象被更新时，订阅就会触发，所以我可以'做东西”。

this.SearchCriteria = ko.observable(new searchModel('', '', '')).extend({
    getEvents: null
});

这是我正在使用的：JSFiddle

Answer 1

您的 bindingHandler 未处理“changeDate”事件。这发生在 $(document).ready 中。

不确定这是否是您要找的，但是，我会稍微改变一下。我会在 searchModel 上绑定淘汰赛并将 bindingHandler 移出。然后，您可以通过您的 searchModel 功能“做事”。

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor() || {};
        $(element).datepicker(options).on("changeDate", function(ev) {
            var observable = valueAccessor();
            observable(ev.date);
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).datepicker("setValue", value);
    }
};

var searchModel = function() {
    var self = this;
    self.startDate = ko.observable();
    self.endDate = ko.observable();
    self.searchTerm = ko.observable();
};

var search = new searchModel();
ko.applyBindings(search);

$('#datepicker1').datepicker();
$('#datepicker2').datepicker(); 

http://jsfiddle.net/J8LCJ/1/