0

我有一个用于 jQuery 滑块控件的自定义剔除活页夹。滑块正在更新 currentPage 可观察对象，但依赖于 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);
4

1 回答 1

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);
        });
    }
};
于 2013-02-20T08:49:00.833 回答