ko配列フィルタを使用して日付範囲を表示

Question

私は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.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(); 

Answer 1

ko.utils.arrayFilterは、任意のアレイフィルタ機能と同様に機能します。

第1引数として配列をとり、第2引数として関数（「述語」と呼ばれる）をとります。

各配列要素に対して述語関数が呼び出され、その特定の要素を結果に含めるかどうかによって、trueまたはfalseが返されます。

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();