3

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

这是我正在使用的模型：

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

4

1 回答 1

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/

于 2014-07-11T22:42:35.423 回答