javascript - 如何过滤 Ember.js 中的本地 hasMany 记录集

Question

过滤 hasMany 对象的 ul 时，我在更新 dom 时遇到问题。这是我要实现的目标:

当用户点击其中一个链接时，它应该过滤掉包含相应元素的 div。这是我当前的代码:

---

路线

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin,{
  model: function (params) {
    return this.store.find('recipient', params.recipient_id);
  },

  setupController: function (controller, model) {
    this._super(controller, model);
    var categories = model.get('offers').map(function(offer){
      var category = Ember.Object.create();
      category.name = offer.get('company_industry');
      category.count = model.get('offers').filterBy('company_industry', offer.get('company_industry')).get('length');
      return category;
    });

    controller.set('categories', categories);
  }

});

这会将 categories 设置为一个 Ember 对象，就像这样:{name: 'Home And Beauty', count: 1}

组件:filterable-offers.js

import Ember from 'ember';

export default Ember.Component.extend({

  actions: {
    filter: function(categoryName) {
      return this.get('model').get('offers').filterBy("company_industry", categoryName);
    }
  }

});

filterable-offers.hbs

<ul>
  {{#each categories as |category|}}
      <li>
        <a {{action "filter" category.name}}>{{category.name}} ({{category.count}})</a>
      </li>
  {{/each}}
</ul>

收件人.hbs

  <div class="row">
  <div class="col-sm-4">
    {{filterable-offers categories=categories model=model}}
  </div>
  <div class="col-sm-8">
    {{#each model.offers as |offer|}}
      <div class="offer-card">
        {{offer.text}}
      </div>
    {{/each}}
  </div>

---

我知道我错过了一些简单的东西，比如在这里观察一些东西，但是当我点击链接过滤元素时，dom 中没有任何更新。过滤器函数确实返回了我想要的结果集，但它没有被主收件人模板中的 model.offers 调用观察到。

Answer 1

您的问题是您要从操作处理程序返回过滤后的结果。 Action 处理程序不使用返回值(大部分情况下)。相反，您需要将过滤后的项目放在您的模板可以访问它们的地方。由于您的过滤器选择器位于不同的组件中，这就是我要做的(如果您对此有任何疑问，请直接提问):

1. 在您的组件中，重新发送过滤器操作，使其冒泡到 Controller :

   actions: {
       filter(categoryName) {
           this.sendAction('filterByCategory', categoryName);
       }
   }
   

2. 确保您的 Controller 可以通过在模板中订阅来接收操作:

   {{filterable-offers categories=categories filterByCategory='filterByCategory'}}
   

3. 在您的 Controller 中为 filterByCategory 操作添加处理程序:

   actions: {
       filterByCategory(categoryName) {
           // We'll use this in the next step
           this.set('filterCategory', categoryName);
       }
   }
   

4. 设置一个计算属性，该属性将根据过滤器类别自动过滤您的项目。我们在 Controller 上有我们的 filterCategory 属性，所以让我们使用它:

   filteredOffers: Ember.computed('model.offers.@each.company_industry', 'filterCategory', {
       get() {
           const offers = this.get('model.offers');
           const filterCategory = this.get('filterCategory');
   
           // If there's no category to filter by, return all of the offers
           if (filterCategory) {
               return offers.filterBy('company_industry', filterCategory);
           } else {
               return offers;
           }
       }
   })
   

5. 最后，不要在模板中使用 model.offers，而是使用 filteredOffers

       {{#each filteredOffers as |offer|}} ... {{/each}}
   

这个答案可能比您想要的更深入一点，但希望它能有所帮助。您遇到的主要症结在于，您需要某种方式来告诉您的 Controller 使用经过过滤的优惠集而不是原始优惠集。这只是实现这一目标的众多方法之一。