Question

我有一个敲除可观察数组，其中包含一个人过去医疗问题的数据。我创建了一个Jquery Range Slider，其最小范围是他的出生年份，而最大范围是当前年份。当用户滑过滑块时，应该只查看属于该范围的那些医疗问题。

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

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

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

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

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

1 个答案: