javascript - 筛选器无法动态更新模板

我正在尝试过滤我的集合“ PriceList”并成功实现了排序，该排序工作得很好，但是当我尝试实现过滤器和搜索时，它的行为很奇怪。当我单击自定义过滤器按钮时，它们不会动态更新模板，但是在此之后进行排序时，模板会被更新，我在哪里弄错了？以下是文件，如果需要更多信息，请告诉我。

price_list.js

PriceListFilter = new Meteor.FilterCollections(PriceList, {
  name: "PriceListFC",
  template: 'price_list',
  filters: {
    "trip": {
      title: 'Trip Types',
      operator: ['$regex', 'i'],
      condition: '$and',
      searchable: 'optional',
    },
  },
  sort:{
    order: ['desc', 'asc'],
    amount0: ['desc', 'asc'],
    amount1: ['desc', 'asc'],
    amount2: ['desc', 'asc'],
    amount3: ['desc', 'asc'],
    amount4: ['desc', 'asc'],
  },
});

price_list.html

<template name="price_list">
<div class="pael panel-info">
  <div class="">
    <div class="pull-right">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" value="{{fcFilterSearchable.criteria}}" data-fc-search-target="search-box">
        </div>
        <button type="submit" class="btn btn-success fc-search-trigger" data-fc-search-trigger="search-box">Submit</button>
        {{#each available}}
          <a href="#" class="fc-search-fields">{{#if active}}Disable{{else}}Enable{{/if}} {{title}} filter</a>
          {{/each}}
      <button type="button" class="fc-filter btn btn-primary {{#if fcFilterObj.isActive 'trip' 'Single Trip'}}active{{/if}}" data-fc-filter-field="trip" data-fc-filter-value="Single Trip" >
        Single Trip
      </button>
      <a href="#" class="fc-filter btn btn-primary {{#if fcFilterObj.isActive 'trip' 'Annual Trip'}}active{{/if}}" data-fc-filter-field="trip" data-fc-filter-value="Annual Trip" >
        Annual Trip
      </a>
        {{#if fcFilterSearchable.criteria}}<button type="button" class="btn btn-danger fc-search-clear">Reset</button>{{/if}}
      </form>
      {{#if fcFilterActive}}
      <div class="navbar-form pull-right">
        {{#each fcFilterActive}}
        <a href="#" class="btn btn-info fc-filter-clear">{{title}}: {{operator}} {{value}}</a>
        {{/each}}
      </div>
      {{/if}}

   </div>
    <h4>Price Comparision</h4>
  </div>
  <div class="table-responsive">
    <table class="table table-hover table-bordered">
      <thead >
        <tr class="info">
          <th class="fc-sort" data-fc-sort="amount0">
            InsureandGo.com - Budget
            {{#if fcSort.amount0.desc}}(des){{/if}}
            {{#if fcSort.amount0.asc}}(asc){{/if}}
          </th>
          <th class="fc-sort" data-fc-sort="amount1">
            InsureandGo.com - Silver
            {{#if fcSort.amount1.desc}}(des){{/if}}
            {{#if fcSort.amount1.asc}}(asc){{/if}}
          </th>
          <th class="fc-sort" data-fc-sort="amount2">
            InsureandGo.com - Gold
            {{#if fcSort.amount2.desc}}(des){{/if}}
            {{#if fcSort.amount2.asc}}(asc){{/if}}
          </th>
          <th class="fc-sort" data-fc-sort="amount3">
            InsureandGo.com - Black
            {{#if fcSort.amount3.desc}}(des){{/if}}
            {{#if fcSort.amount3.asc}}(asc){{/if}}
          </th>
          <th class="fc-sort" data-fc-sort="amount4">
            InsureandGo.com - Annual Silver
            {{#if fcSort.amount4.desc}}(des){{/if}}
            {{#if fcSort.amount4.asc}}(asc){{/if}}
          </th>
        </tr>
      </thead>
      <tbody>
      {{#each fcResults}}
      <tr>
        <td>{{amount0}}</td>
        <td>{{amount1}}</td>
        <td>{{amount2}}</td>
        <td>{{amount3}}</td>
        <td>{{amount4}}</td>
      </tr>
      {{/each}}
      </tbody>

    </table>
  </div>
</div>
  </div>
</template>

最佳答案

如果您没有在模板中同时使用fcPager和fcSort，那么当数据更改时，模板帮助程序的依赖关系不会失效—可能是由于Dependency中的filter-collections初始化怪癖。

尝试将分页器添加到模板中。否则，您可以尝试覆盖模板侦听器并使用changed()强制无效

关于javascript - 筛选器无法动态更新模板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21920431/