流星无功内容过滤

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：

首先，将您的option标签的value更改为本月的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}}); 
}