从 jQuery 滑块控件中获取淘汰计算的 observables答案

【问题标题】：Getting knockout computed observables to fire from jQuery slider control从 jQuery 滑块控件中获取淘汰计算的 observables
【发布时间】：2013-02-20 16:49:00
【问题描述】：

我有一个用于 jQuery 滑块控件的自定义剔除活页夹。滑块正在更新 currentPage observable，但依赖于 currentPage() 的通用 ko.computed 永远不会触发。 为什么会这样以及如何解决它以便触发泛型？

我在这里找到了使用带有淘汰赛的异步 ajax 调用的这种技术...Asynchronous Dependent Observables。显然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);

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

您实际上并没有在滑块更改事件中更新 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);
        });
    }
};

【讨论】：