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

讓我知道這是你正試圖實現？