0

リアクティブな Range Slider を作成しようとしています。範囲を持つドロップダウンリストがあります。したがって、ドロップダウンが変更されるたびに、範囲サイドバーの範囲が自動的に変更されます。

=========テンプレート ヘルパー コード ================

$("#ionrange_1").ionRangeSlider({
        min: Session.get('min'),
        max: Session.get('max'),
        type: 'double',
        prefix: "$",
        maxPostfix: "+",
        prettify: false,
        hasGrid: true
    });

=========================================

テンプレートヘルパーでもこれを試します。

Template Rendered で範囲スライダーを定義します。

var slider = $("#ionrange_1").data("ionRangeSlider");

slider.reset();

$("#ionrange_1").ionRangeSlider({
            min: Session.get('min'),
            max: Session.get('max'),
            type: 'double',
            prefix: "$",
            maxPostfix: "+",
            prettify: false,
            hasGrid: true
        });
4

1 に答える 1

1

テンプレートrendered関数のコードをautorun. さらに、セッション変数の代わりにリアクティブ変数を使用する必要があります

これを試して：

var self = this;
self.autorun(function() {

    var slider = $("#ionrange_1").data("ionRangeSlider");
    
    slider.reset();
    
    $("#ionrange_1").ionRangeSlider({
                min: self.min.get(),
                max: self.max.get(),
                type: 'double',
                prefix: "$",
                maxPostfix: "+",
                prettify: false,
                hasGrid: true
            });

};

リアクティブ変数を更新するたびに、このコードを実行する必要があります (そして、スライダーの最大値/最小値が更新されます)。

スライダーをリロードしたら、現在の値を元に戻すために、現在の値をリアクティブ変数に格納することも検討する必要があります。

于 2015-07-21T13:44:04.503 に答える