1

人の過去の医療問題のデータを含むノックアウト可観測配列があります。最小範囲が生年で、最大範囲が当年である Jquery Range Slider を作成しました。ユーザーがスライダーをスライドすると、範囲内にある医学的問題のみが表示されます。

これまでのところ、範囲がdivに保存されている場合、医学的問題を表示することはできましたが、スライダーで機能させることはできません.

これがフィドルです：http://jsfiddle.net/bX9pP/

それがviewmodelコードです：

var viewModel = {
    one : ko.observableArray([
    {
        HistoryIcon: "img/Surgeon.png",
        HistoryItem: "Laparoscopic Cholecystectomy",
        HistoryItemVenue: "Dr.Rao Khan KRL Hospital",
        Date: "16th May 2013",
        Year: "2013",
        Tag: "None"
    },
    {
        HistoryIcon: "img/haayeoye",
        HistoryItem: "Laparoscopic Cholecystectomy",
        HistoryItemVenue: "Dr.Rao Khan KRL Hospital",
        Date: "16th May 2011",
        Year: "2011",
        Tag: "None"
    },
    {
        HistoryIcon: "img/amedical_pot_pills.png",
        HistoryItem: "Symbicort, 50mgs(PainRelief)",
        HistoryItemVenue: "Prescribed by Dr.Jay Rajpoot Shifa Intl Hospital",
        Date: "16th May 2012",
        Year: "2012",
        Tag: "None"},
    {
        HistoryIcon: "img/amedical_pot_pills.png",
        HistoryItem: "Symbicort, 50mgs(PainRelief)",
        HistoryItemVenue: "Prescribed by Dr.Jay Rajpoot Shifa Intl Hospital",
        Date: "16th May 2015",
        Year: "2015",
        Tag: "None"}
    ])
};
ko.applyBindings(viewModel);

これは、div 要素の innerHTML を取得するスクリプトです。

var temp=document.getElementById("s1").innerHTML;
var temp1=document.getElementById("s2").innerHTML;

スライダー スクリプト コード:

$(function() {
    $( "#slider-range" ).slider({ // Slider Jq ui 
      range: true, //Range Slider
      min: 1960, //Minimum Value
      max: 2013, //Maximum Value
      step: 1, //Steps
      values: [ 1960, 2013 ], //Initial Value

        change: function( event, ui ) { //When slides
          //    $( "#s1" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ]);// Values append to div, [0] being min , [1] being max
          //    $( "#s2" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ]);// Values append to div, [0] being min , [1] being max
          $( "#s1" ).html( ui.values[ 1 ]);
          $( "#s2" ).html( ui.values[ 0 ]);   
        }
    }); 
});

最後にHTMLコード

<div id="s1">2012</div>
<div id="s2">2013</div>

<div  id="slider-range"></div>

<div data-bind="foreach: one">
    <!-- ko if: Year <= temp1 && Year >= temp   -->
    <div class="span4" data-bind="text: Date" ></div>
    <div class="span4" data-bind="text: HistoryIcon" ></div>
    <!-- /ko -->
</div>
4

1 に答える 1

3

レンジ スライダーのカスタム バインドを作成できます。また、範囲内のアイテムを表示するために、計算された監視可能な配列を作成できます。これは、最小または最大の日付の監視可能な値が変更されるたびに再計算されます。

レンジ スライダーのカスタム バインディング (javascript) :

ko.bindingHandlers.rangeSlider = {
    init: function(element, valueAccessor, allBindingsAccessor)
    {
        var options = valueAccessor() || {};
        var params =  allBindingsAccessor() || {};
        options.change = function(e, ui)
        {
            params.MinValue(ui.values[0]);
            params.MaxValue(ui.values[1]);
        }
        options.slide = function(e, ui)
        {
            params.MinValue(ui.values[0]);
            params.MaxValue(ui.values[1]);
        }            
        $(element).slider(options);

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

HTML:

<div data-bind="rangeSlider: {range: true, min:500, max:15000 , step:100}, minValue: chosenMinPrice, maxValue: chosenMaxPrice"></div>

私はこれをチェックするフィドルを作成しました:

デモフィドル

これがあなたが達成しようとしていることを教えてください。

于 2013-04-16T09:10:31.970 に答える