Filter values in the controller

I want to filter products depending of the selected category which can be selected with a drop-down menu. products belongTo category

• What do I have to change in the controller to filter products depending of the chosen value of the drop-down menu?


• How can I add an empty field in the drop-down menu and display all products when it is chosen?

Here is the current Ember CLI code:

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return {
      categories: this.store.find('category'),
      products: this.store.find('product')
    };
  }
});

app/controllers/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  selectedCategory: null,

  categories: function(){
    var model = this.get('model.categories');
    return model;
  },

  products: function(){
    var model = this.get('model.products');
    return model;
  }.property('selectedCategory')
});

app/templates/index.hbs

<p>
{{view "select"
       content=model.categories
       optionValuePath="content.id"
       optionLabelPath="content.name"
       value=selectedCategory
       }}
</p>

{{#each product in products}}
  <li>{{product.name}}</li>
{{/each}}

app/models/product.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  category: DS.belongsTo('category', { async: true }),
});

app/models/category.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  products: DS.hasMany('product', { async: true })
});