当jquery范围更改时进行ajax调用

Question

我正在做一个基于这里的剔除处理程序，但是当我的min或max范围发生变化时，我需要进行ajax调用，但是每次我将函数声明在我的视图模型中时。给了我一个错误。

我的页面：

 <span> price between </span>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold; width: 95px;"
                            name="budgetrange" data-bind="event:{change:Filter}"/>
                        per person</span>
                    <div id="slider-range" style="border: 1px solid #787878;">
                    </div>
    <span> it could be on my house </span>
        <input type="text" id="flexibility" name="flexibility" class="slidervalstyle" size="5"
                                style="width: 29px; border: 0px;" data-bind="value: flexibility, valueUpdate: 'afterkeydown', event: { change: Filter }"/>
                                days before/after </span>
                            <div id="slider-range-max" style="margin-top: 5px; border: 1px solid #787878;" data-bind="slider: flexibility">

我的绑定处理程序(与基础相同)：

 ko.bindingHandlers.slider = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                var options = allBindingsAccessor().sliderOptions || {};
                if (ko.isObservable(options.max)) {
                    options.max.subscribe(function (newValue) {
                        $(element).slider('option', 'max', newValue);
                    });
                    options.max = ko.utils.unwrapObservable(options.max);
                }
                $(element).slider(options);
                ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
                    var observable = valueAccessor();
                    observable(ui.value);
                });
                ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                    $(element).slider("destroy");
                });
                ko.utils.registerEventHandler(element, "slide", function (event, ui) {
                    var observable = valueAccessor();
                    observable(ui.value);
                });
            },
            update: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                if (isNaN(value)) value = 0;
                $(element).slider("value", value);
myViwmodel.filter(); //i'm trying to load this function on the update event or in onther place allways throwns an error.


            }
    };

我的视图模型如下所示：

 function myViewModel() {
        var self = this;
self.flexibility = ko.observable(2);
self.minPrice = ko.observable(20);
        self.maxPrice = ko.observable(200);
self.products = ko.observableArray();

self.loadUI= function(){
//for price

            $(function () {
                $("#slider-range").slider({
                    range: true,
                    min: self.minPrice(),
                    max: self.maxPrice(),
                    values: self.minPrice(), self.maxPrice()],
                    slide: function (event, ui) {
                        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                       // self.Filter(); //i tried this too, no results
                    }
                });
                $("#amount").val("$" + Math.floor($("#slider-range").slider("values", 0)) +
                    " - $" + Math.ceil($("#slider-range").slider("values", 1)));
            });
//for flexibility
$("#slider-range-max").slider({
                    range: "max",
                    min: 0,
                    max: 7,
                    value: self.flexibility(),
                    slide: function (event, ui) {
                        $("#flexibility").val(ui.value);
                        //  self.flexibility(ui.value);
                    }
                });
                $("#flexibility").val($("#slider-range-max").slider("value"));   

}

 self.Filter = function() {

            $.ajax({
                type: "POST",
                url: "mydomain.filter",
                data: {min:self.minPrice(), max:self.maxPrice()},
                contentType: "application/json; charset=utf-8",
                cache: false,
                success: function (result) {
                    // do something with result
                },
                error: function(a, desc, error) {
                    alert('error');
                },
            });
}

 $(function(){

        var mine = new myViewModel();
        mine.loaUI();
        ko.applyBindings(mine);


}

Answer 1

绑定处理程序不应该试图调用视图模型中的方法--即它不应该知道任何关于myViewModel的信息，实际上它也不知道--这就是您的问题所在。

如果要在可观测值更新时调用视图模型中的方法，最好订阅可观测值本身：

function myViewModel() {
    var self = this;
    self.flexibility = ko.observable(2);

    /* ... */

    self.Filter = function() {
        /*  ...  */
    };

    //Here we subscribe to be notified whenever the flexibility observable changes.
    //Subscriptions get given the new value of the observable, but we're ignoring it here
    self.flexibility.subscribe(function(newValue) {
        self.Filter();
    });
}

这样，您的绑定处理程序是自包含的，可以重用，并且您的视图模型和它的逻辑是自包含的。文献资料更详细地介绍了显式订阅。