javascript - How to filter a local hasMany record set in Ember.js -

i having issues making dom update when filtering ul of hasmany objects. here i'm trying accomplish:

when user clicks on 1 of links should filter down div containing respective elements. here current code:

---

route

import ember 'ember'; import authenticatedroutemixin '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 ember object liks so: {name: 'home , beauty', count: 1}

component: filterable-offers.js

import ember '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 |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 |offer|}}       <div class="offer-card">         {{offer.text}}       </div>     {{/each}}   </div> 

---

i know i'm missing simple observing here, when click link filter down elements nothing updated in dom. filter function return result set want isn't being observed model.offers call in main recipient template.

your problem you're returning filtered result action handler. action handler doesn't use return value (for part). instead, need place filtered items somewhere template can access them. since filter selector in different component, (if have questions part of this, ask):

1. in component, re-send filter action bubbles controller:

   actions: {     filter(categoryname) {         this.sendaction('filterbycategory', categoryname);     } } 

2. make sure controller can receive action subscribing in template:

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

3. add handler filterbycategory action in controller:

   actions: {     filterbycategory(categoryname) {         // we'll use in next step         this.set('filtercategory', categoryname);     } } 

4. set computed property automatically filter items based on filter category. have our filtercategory property on controller, 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 filter by, return of offers         if (filtercategory) {             return offers.filterby('company_industry', filtercategory);         } else {             return offers;         }     } }) 

5. finally, instead of using model.offers in template, use filteredoffers

       {{#each filteredoffers |offer|}} ... {{/each}} 

that answer might tad more in-depth want, helps. major sticking point having needed way tell controller use filtered set of offers instead of original set. 1 of many ways accomplish that.