12

私は、ノックアウトjsが次の問題に対してうまく機能するかどうかを理解しようとしています。

テキストボックスにリンクしたいスライダーが複数あります。

テキストボックスが変更されると、対応するスライダーが新しい値に更新される必要があり、その逆も同様です。

スライダーの値またはテキストボックスを変更するときは、すべてのテキストボックスからの入力を使用して結果を計算する関数を呼び出す必要があります。

私はここに私の迅速で汚いjQueryソリューションを持っています。

ノックアウトjsを使用して、よりエレガントな方法で同じ結果を達成するのは簡単でしょうか？

KnockoutJSによってキャッチされないjQueryUIdatepickerchangeイベントで行われるようなカスタムバインディングハンドラーを作成する必要があると思います

4

4 に答える 4

38

以下に例を示します: http://jsfiddle.net/jearles/Dt7Ka/

カスタム バインディングを使用して jquery-ui スライダーを統合し、Knockout を使用して入力をキャプチャし、正味額を計算します。

--

UI

<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>

モデルを見る

ko.bindingHandlers.slider = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(element).slider(options);
    $(element).slider({
        "slide": function (event, ui) {
            var observable = valueAccessor();
            observable(ui.value);
        },
        "change": function (event, ui) {
            var observable = valueAccessor();
            observable(ui.value);
        }
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).slider("destroy");
    });
  },
  update: function (element, valueAccessor) {
    var value = ko.unwrap(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());
于 2012-10-12T10:47:22.667 に答える
2

@John Earles と @Michael Kire Hansen: 素晴らしい解決策をありがとう!

Michael Kire Hansen の高度なコードを使用しました。スライダーの「max:」オプションを ko.observable に関連付けたところ、この場合、スライダーが値を正しく更新しないことが判明しました。例: スライダーが最大値 25 の値 25 にあり、最大値を 100 に変更すると、スライダーは最も右の位置にとどまり、最大値であることを示します (ただし、値は 100 ではなく 25 のままです)。1 ポイント左にスライドするとすぐに、値が 99 に更新されます。

解決策: "update:" の部分で、最後の 2 行を次のように変更します。

$(element).slider("option", allBindingsAccessor().sliderOptions);
$(element).slider("value", value);

これにより、最初にオプションが変更され、次に値が変更され、魅力的に機能します。

于 2014-05-24T12:51:49.187 に答える