1

このフィドルは、jQuery スライダーの「スライド」イベントを Knockout オブザーバブルにバインドする方法を示しています。スライダーの「最大」オプションをオブザーバブルにバインドするには、これをどのように変更する必要がありますか? まったく新しい ko.bindingsHandler エントリを作成する必要がありますか? それとも既存のものを流用できますか？

参考までに、フィドルのコードを次に示します。

HTML

<h2>Slider Demo</h2>

Savings: <input data-bind="value: savings, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>

Spent: <input data-bind="value: spent, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: spent, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>

Net: <span data-bind="text: net"></span>

JS

ko.bindingHandlers.slider = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(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);

  }
};


var ViewModel = function() {
    var self = this;

    self.savings = ko.observable(10);
    self.spent = ko.observable(5);
    self.net = ko.computed(function() {
        return self.savings() - self.spent();
    });
}

ko.applyBindings(new ViewModel());
4

2 に答える 2

2

KO 用の jQuery Ui バインディングのコレクションがあります。プロジェクトでそのコントロールを必要としなかったため、スライダーを実行していません。しかし、ボタンのバインドを確認してください

https://github.com/AndersMalmgren/Knockout.Bindings

ko.bindingHandlers.button = {
    initIcon: function (options) {
        if (options.icon) {
            options.icons = { primary: options.icon };
        }
    },
    init: function (element, valueAccessor) {
        var options = ko.utils.unwrapObservable(ko.toJS(valueAccessor())) || {};
        ko.bindingHandlers.button.initIcon(options);

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).button("destroy");
        });

        $(element).button(options);
    },
    update: function (element, valueAccessor) {
        var options = ko.toJS(valueAccessor());
        ko.bindingHandlers.button.initIcon(options);

        if (options) {
            $(element).button(options);
        }
    }
};

魔法は更新関数で行われます。デフォルトでは、KO はオブジェクト リテラル内のすべてのオブザーバブルをサブスクライブします。そのため{ max: aObservable }、更新関数にバインドすると、子が更新されたときにトリガーされます。

次にko.toJS(valueAccessor());、オブジェクトの監視を解除し、それを使用して jQuery コントロールを更新します。このメソッドはスライダーにも使用でき、その汎用性があり、設定ごとに追加のコードを追加する必要はありません

于 2013-02-11T19:32:14.770 に答える