Jquery UI范围滑块不更新Knockout绑定

时间:2013-04-16 08:12:34

标签: jquery-ui knockout.js custom-binding

我有一个敲除可观察数组,其中包含一个人过去医疗问题的数据。 我创建了一个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>

1 个答案:

答案 0 :(得分:3)

您可以为范围滑块创建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

让我知道这是你想要实现的目标吗?