фильтрация реактивного содержимого метеор

Question

У меня есть динамическая страница с таблицей данных, которая требует фильтрации. У меня есть поле месяца для каждого элемента в моей коллекции, у меня также есть выбор из 13 вариантов (12 месяцев + любой), у меня он работает, если запрос снова вызван, однако он не является динамическим. Вот что я прямо сейчас:

HTML

 <h4>Filter by Month</h4> 
    <select class="form-control month-filter"> 
    <option value="show_m_any">Any</option> 
    <option value="show_m_1">January</option> 
    <option value="show_m_2">Februray</option> 
    <option value="show_m_3">March</option> 
    <option value="show_m_4">April</option> 
    <option value="show_m_5">May</option> 
    <option value="show_m_6">June</option> 
    <option value="show_m_7">July</option> 
    <option value="show_m_8">August</option> 
    <option value="show_m_9">September</option> 
    <option value="show_m_10">October</option> 
    <option value="show_m_11">November</option> 
    <option value="show_m_12">December</option> 
</select> 
    {{#each tripList}} 
     <tr> 
     <td>{{day}}.{{month}}.{{year}}</td> 
     <td>{{car}}</td> 
     <td>{{a}}</td> 
     <td>{{b}}</td> 
     <td>{{dist}}</td> 
     <td><a href="#" class="delete-trip"><span class="glyphicon glyphicon-trash"></span></a></td> 
     </tr> 
    {{/each}} 

main.js (клиент)

Template.trip_html.helpers({ 
trip_html: function(){ 

console.log(Trips.find({})) 
return Trips.find({}, {sort: {createdAt: -1}, limit: 10}); 
}, 

tripList: function(){ 
if(month_filter == 1){ 
    return Trips.find({"month": { $eq: "1" }}, {sort:{createdAt: -1}}); 
} else if(month_filter == 2){ 
    return Trips.find({"month": { $eq: "2" }}, {sort:{createdAt: -1}}); 
} else { 
    return Trips.find({}, {sort: {createdAt: -1}}); 
} 

}}); 


Template.trip_html.events({ 
"change .month-filter": function(event, template) { 
    var value = $(event.target).val(); 
    switch(value){ 
    case "show_m_any": 
    month_filter = 0; 
    break; 

    case "show_m_1": 
    month_filter = 1; 
    break; 

    case "show_m_2": 
    month_filter = 2; 
    break; 

    case "show_m_3": 
    break; 

     case "show_m_4": 
    break; 

     case "show_m_5": 
    break; 

     case "show_m_6": 
    break; 

     case "show_m_7": 
    break; 

     case "show_m_8": 
    break; 

     case "show_m_9": 
    break; 

     case "show_m_10": 
    break; 

     case "show_m_11": 
    break; 

     case "show_m_12": 
    break; 

    } 
    }}); 

Изображение страницы

Answer 1

Попробуйте использовать reactive variable:

Прежде всего, измените value ваших option тегов только на number месяца.

Пример:

<select class="form-control month-filter"> 
    <option value="0">Any</option> 
    <option value="1">January</option> 
    <option value="2">Februray</option> 
    <option value="3">March</option> 
    [ ... etc ... ] 
</select> 

Тогда в ваших событий блокируют вам не нужно использовать switch, потому что вы можете просто тянуть номер месяца прямо из вашего варианта value.

Template.trip_html.events({ 
    "change .month-filter": function(event, template) { 

     const month = new ReactiveVar(null); //declare reactive var 
     var monthNumber = $(event.target).val(); // get month number from selected option value 
     month.set(monthNumber); // set reactive var to month number 
}); 

Тогда в вашем помощнике вам нужно всего лишь:

tripList: function(){ 
    const monthNumber = month.get() 
    return Trips.find({"month": { $eq: monthNumber }}, {sort:{createdAt: -1}}); 
}