2

JQM レンジ スライダーをノックアウトでうまく動作させるのに苦労しています。これは、JQM スライダーの非常に基本的な html コードです。

<input type="range" name="quantity-slider" id="quantity-slider" min="0" max="10">

サンプルとして、このノックアウト バインディングを作成し、ドキュメント準備完了に適用しました。

var ViewModel = function() {
    this.quantity = ko.observable(4);
}

$(document).ready(function () {
    ko.applyBindings(new ViewModel());
});

範囲スライダーのJQM初期化に関連するいくつかの問題を発見した他の人々からのいくつかの投稿をインターネットで読みました（たとえば、ここ： http ://css.dzone.com/articles/knockoutjs-binding-helperおよびここ：http ://www.programico.com/1/post/2012/12/knockoutjs-jquerymobile-slider.html ) を参照し、それぞれ独自のカスタム バインディング実装を備えた実用的なソリューションを提供します。

それらの1つは次のとおりです（http://www.hughanderson.com/による）：

data-bind="value: quantity, slider: quantity"

ここまでは順調ですね。その後、私はこの問題に遭遇します：

JQM スライダーが最初のページにある場合は機能します。JQM スライダーが 2 ページ目にある場合、もう機能しません。

私が理解できるように、これはこの特定の JQM ウィジェットと彼の DOM 操作に関連する問題だと思います。これをよりよく説明するために、2 つの jsFiddle を作成しました。ここでは、2 つの JQM ページの順序を入れ替えるだけです。

  1. 動作しない: http://jsfiddle.net/5q38Q/ 2 番目の JQM ページのスライダー
  2. 動作: http://jsfiddle.net/5q38Q/1/最初の JQM ページのスライダー

JQMスライダーのノックアウトバインディングを初期化する正しい方法はどれですか？JQM スライダーのカスタム バインディングを記述する別の方法があるのでしょうか、それともノックアウト バインディングを pagebeforeshow イベントに配置する必要があるのでしょうか。

更新: 次の変更により、スライダーは正しい値を表示し、テキスト入力部分とも同期されます。

$(document).on('pagebeforeshow', '#slider-page', function(){       
    $('#quantity-slider').val(viewModel.quantity());
    $('#quantity-slider').slider('refresh');
});

しかし、より良い解決策がないのではないかと思います。

少なくとも、Varun のカスタム バインディングと組み合わせると、今では非常にうまく機能しています。

4

3 に答える 3

2

私は同じ問題に遭遇しました。これが私がそれを解決した方法です。ただし、テキスト入力を使用して値を直接編集する場合、このソリューションはオブザーバブルを更新しません。（入力テキストボックスを表示しないので、この解決策で十分です）

http://jsfiddle.net/WMr8D/9/

$(document).ready(function () {
var ViewModel = function () {
    var self = this;
    self.quantity = ko.observable(4);
};    

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        $(document).on({
            "mouseup touchend keypress": function (elem) {
                value($('#' + element.id).val());
            }
        }, ".c-slider");
    }
};    

ko.applyBindings(new ViewModel());
});
于 2013-05-12T00:27:09.633 に答える
0

カスタム ハンドラーでは、mouseup touchend および keypress にバインドするよりも、"change" イベントにバインドする方が信頼性が高くなります。また、pagebeforeshow イベントは必要ありません。ハンドラーの初期化中に value 属性を設定するだけです。

ko.bindingHandlers.slider = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        $(element).attr("value", value());
            $(document).on({
                "change": function (elem) {
                var sliderVal = $('#' + element.id).val();
                value(sliderVal);
            }
        }, ".ui-slider");
    }
 };

例を参照してください: http://jsfiddle.net/ZbrB7/2483/

于 2014-05-21T10:34:07.927 に答える