Jquery UI 범위 슬라이더 녹아웃 바인딩을 업데이트하지 않습니다.

Question

나는 한 사람의 과거 의학적 문제에 대한 데이터가 포함 된 녹아웃 관찰 가능 배열을 가지고 있습니다. 나는 Jquery Range Slider를 만들었는데 최소 범위는 Birth year이고 최대 범위는 Current Year이다. 사용자가 슬라이더를 통과 할 때 범위 내에있는 의료 문제 만보아야합니다.

범위가 div에 저장되면 의학적 문제를보기 위해 지금까지 완료했습니다. 하지만 슬라이더와 함께 작동하도록 만들 수 없습니다. http://jsfiddle.net/bX9pP/

뷰 모델 코드입니다 :

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

슬라이더 스크립트 코드 : DIV 요소 'innerHTML을 얻을 스크립트의

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

다음

는 바이올린입니다

$(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 ]); 
     } 
    }); 
}); 

마지막으로,

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

Answer 1

HTML 코드는 당신은 custom binding에 대한 범위 슬라이더을 만들 수 있습니다. 범위 아래에 항목을 표시하려면 computed obervable array을 만들 수 있습니다. 최소 또는 최대 날짜가 관찰 가능할 때마다 매번 다시 계산됩니다.

사용자 지정 범위 슬라이더 (자바 스크립트) 바인딩 :

이

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> 

가 :

Demo Fiddle

나를 보자 이게 너 니가 아는거야. 성취하려고 노력하고 있습니까?