JQuery UI范围滑块不更新敲除绑定

Question

我有一个基因敲除可观测数组，包含一个人过去的医疗问题的数据。 我创建了一个Jquery范围滑块，其最小范围是他的出生年份，而最大范围是当前年份。当用户在滑块上滑动时，只能看到落在该范围内的那些医疗问题。

到目前为止，我已经完成查看医疗问题，如果范围保存在div， 但我无法使其与滑块一起使用。

这里是小提琴：http://jsfiddle.net/bX9pP/

这就是视图模型代码：

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> 

Answer 1

您可以创建一个custom binding为范围滑块。并且为了显示该范围内的项目，您可以创建一个computed obervable array，每当您的最小或最大日期可观察到变化时，它就会重新计算。

的范围滑块（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> 

我创建了一个小提琴检查：

Demo Fiddle

让我知道这是你正试图实现？