0

jQuery スライダー コントロール用のカスタム ノックアウト バインダーがあります。スライダーは currentPage オブザーバブルを更新していますが、 currentPage() に依存するジェネリック ko.computed は起動しません。 これはなぜですか、ジェネリックが起動されるように修正するにはどうすればよいですか?

ここでノックアウトで非同期 ajax 呼び出しを使用するためのこの手法を見つけました... Asynchronous Dependent Observables。明らかにdependentObservableが に置き換えられましたcomputed。dependentObservableまたはで動作させることができましたが、ajax呼び出しが複数回発生しないようcomputed.deferEvaluation=falseにする必要があります。deferEvaluation=true

フィドル 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

バインディング イベントに送信している valueAccessor は、スライダーにバインドしているプロパティ、つまり currentPage であるため、実際にはスライダー変更イベントで displayText を更新していません。カスタム バインディングのシグネチャを変更して 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 に答える