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

流星反应内容过滤

1 个答案: