流星反应内容过滤答案

【问题标题】：meteor reactive content filtering流星反应内容过滤
【发布时间】：2017-02-15 22:46:03
【问题描述】：

我有一个包含数据表的动态页面，需要过滤。我的集合中的每个项目都有月份字段，我还有一个包含 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;

    }
  }});

页面图片

【问题讨论】：

标签： javascript meteor

【解决方案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}});
}

【讨论】：