如何在Ember.js中过滤本地hasMany记录集

Question

I am having issues making the dom update when filtering a ul of hasMany objects. Here is what I'm trying to accomplish:

When a user clicks on one of the links it should filter down a div containing the respective elements. Here is my current code:

---

Route

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

});

This sets categories to an Ember object liks so: {name: 'Home And Beauty', count: 1}

Component: 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>

recipient.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>

---

I know I'm missing some simple like observing something here, but when I click the link to filter down the elements nothing is updated in the dom. The filter function does return the result set I want but it isn't being observed by the model.offers call in the main recipient template.

Answer 1

Your problem is that you're returning your filtered result from your action handler. The action handler doesn't use a return value (for the most part). Instead, you need to place your filtered items somewhere where your template can access them. Since your filter selector is in a different component, this is what I would do (if you have questions about any part of this, just ask):

1. In your component, re-send the filter action so it bubbles to the controller:

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

2. Make sure your controller can receive the action by subscribing to it in the template:

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

3. Add a handler for the filterByCategory action in your controller:

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

4. Set up a computed property that will automatically filter your items based on the filter category. We have our filterCategory property on the controller, so let's use that:

    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. Finally, instead of using model.offers in your template, use filteredOffers

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

That answer might be a tad more in-depth than you want, but hopefully it helps. The major sticking point you were having is that you needed some way to tell your controller to use a filtered set of offers instead of the original set. This is just one of many ways to accomplish that.