使用ko数组过滤器显示日期范围

时间:2016-04-10 09:33:56

标签: knockout.js

我是学习淘汰赛的新手,我试图使用数组过滤器从2个输入中获取日期范围,基本上是开始日期和结束日期。此开始日期和结束日期来自输入字段。我得到一个包含很多日期的数组。

<div class="row">
        <div class="col-sm-6">
            <input  type="text" class="form-control"  data-provide="datepicker" data-date-format="yyyy-mm-dd" name="birthday"  data-bind="value : startDate"/>  
        </div>    
        <div class="col-sm-6">
            <input type="text" class="form-control"  data-provide="datepicker" data-date-format="yyyy-mm-dd" name="birthday"  data-bind="value : endDate" />  
        </div>    
     </div>
<tbody data-bind="foreach: alldata">
  <tr>
     <td class="text-center"><span data-bind="text: $data.INSERT_DT"></span></td>
  </tr>
</tbody>

所以我试图使用ko.utils.arrayFilter,但我不确定它是如何工作的。但我想要实现的是让数组中的所有日期都落在中间self.startdate()self.endDate这是我的脚本。

//This basically means showing all dates in observable
        self.startDate = ko.observable('2000-12-01');
        self.endDate = ko.observable('9999-12-01');

        self.NewdateFilter = ko.observable();

        self.filterDate = ko.computed(function(data){
           var value1 = self.startDate();
           var value2 = self.endDate();
           return ko.utils.arrayFilter( function(){
               //not really sure how to use this.
           });
        });

        self.alldata = ko.observableArray();

        self.viewAllInvoice = function () {
            $.ajax({
                type: 'POST',
                url: BASEURL + 'index.php/main/getDates/' ,
                contentType: 'application/json; charset=utf-8'
            })
            .done(function(invoices) {
            self.alldata.removeAll();
            $.each(invoices, function (index, invoice) {

                    self.alldata.push(invoice);
                });
        })
            .fail(function(xhr, status, error) {
                alert(status);
            })
            .always(function(data){                 
            });
        };
    self.viewAllInvoice();

1 个答案:

答案 0 :(得分:1)

ko.utils.arrayFilter的工作方式与任何数组过滤功能相同。

它将一个数组作为第一个参数,将一个函数(称为&#34;谓词&#34;)作为第二个参数。

然后为每个数组元素调用谓词函数,并且应该返回truefalse,具体取决于您是否需要结果中的特定元素。

ko.utils.arrayFilter([1,2,3,4,5], function isEven(item) {
    return item % 2 === 0;
});  // -> [2,4] 

所以,在你的背景下:

self.alldata = ko.observableArray();
self.startDate = ko.observable('2000-12-01');
self.endDate = ko.observable('9999-12-01');

self.filterDate = ko.computed(function(data) {
    var value1 = self.startDate();
    var value2 = self.endDate();
    return ko.utils.arrayFilter(self.alldata(), function (item) {
        return value1 < item.date && item.date < value2;
    });
});

旁注:您的viewAllInvoice()功能可以简化一点。

self.viewAllInvoice = function() {
    $.get(BASEURL + 'index.php/main/getDates/')
    .done(self.alldata)
    .fail(function(xhr, status, error) {
        alert(status);
    })
};
self.viewAllInvoice();