从jQuery滑块控件中获取击倒计算的可观测值

Getting knockout computed observables to fire from jQuery slider control

本文关键字：计算 可观 获取 jQuery 控件      更新时间：2023-09-26

我有一个用于jQuery滑块控件的自定义淘汰绑定器。滑块正在更新可观察到的currentPage，但依赖于currentPage（）的通用ko.computed永远不会触发为什么会出现这种情况，以及如何修复它，从而激发泛型

我在这里找到了使用带有淘汰的异步ajax调用的技术。。。异步相关观察对象。显然，dependentObservable已经被computed所取代。我可以让它与dependentObservable或computed.deferEvaluation=false一起工作，但我需要deferEvaluation=true，这样ajax调用就不会被多次触发。

小提琴http://jsfiddle.net/jeljeljel/3WN6v/

HTML

<div style="margin:10px;" data-bind="slider: currentPage, sliderOptions: {min: 0, max: 10, range: 'min'}"></div>
<div id="plugin" data-bind="template: { name: 'template1', data: $data }" ></div>
<script type="text/html" id="template1">
        <span data-bind="text: displayText"></span>
</script>

Javascript

// create ko custom binding handler for slider control
ko.bindingHandlers.slider = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = ko.toJS(allBindingsAccessor().sliderOptions) || {};
        $(element).slider(options);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).slider('destroy');
        });
        ko.utils.registerEventHandler(element, 'slidechange', function (event, ui) {
            var observable = valueAccessor();
            observable(ui.value);
        });
    }
};
function DataModel() {
    var self = this;
    self.currentPage = ko.observable(0);
    self.displayText = ko.observable(0);
    ko.computed({
        read: function () {
            $.ajax({
                url: '/echo/json/',
                //data: { page: currentPage() },
                success: function(){
                    self.displayText(currentPage());
                }
            });
        },
        deferEvaluation: true
    });
}
dataModel = new DataModel();
ko.applyBindings(dataModel);

您实际上并没有更新滑块更改事件中的displayText，因为您发送到绑定事件的valueAccessor是您绑定到滑块的属性，即currentPage。更改自定义绑定的签名以包含viewModel，然后使用它更新displayText:的值

// create ko custom binding handler for slider control
ko.bindingHandlers.slider = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.toJS(allBindingsAccessor().sliderOptions) || {};
        $(element).slider(options);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).slider('destroy');
        });
        ko.utils.registerEventHandler(element, 'slidechange', function (event, ui) {
            viewModel.displayText(ui.value);
        });
    }
};
相关文章：