我有一个淘汰的可观察数组,其中包含一个人过去的医疗问题的数据。我创建了一个 Jquery Range Slider,其最小范围是他的出生年份,而最大范围是当前年份。当用户滑过滑块时,只应查看属于该范围的那些医疗问题。
到目前为止,如果范围保存在 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>