ember.js - Filter values in the controller -

i want filter products depending of selected category can selected drop-down menu. products belongto category

• what have change in controller filter products depending of chosen value of drop-down menu?
• how can add empty field in drop-down menu , display products when chosen?

here current ember cli code:

app/routes/index.js

import ember '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 '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 'ember-data';  export default ds.model.extend({   name: ds.attr('string'),   category: ds.belongsto('category', { async: true }), }); 

app/models/category.js

import ds 'ember-data';  export default ds.model.extend({   name: ds.attr('string'),   products: ds.hasmany('product', { async: true }) }); 

what have change in controller filter products depending of chosen value of drop-down menu?

you create computed property filters products like:

filteredproducts: function() {     var selectedcategory = this.get('selectedcategory');     var products = this.get('products');     return products.filter(function(product) {         return product.get('category.name') === selectedcategory;     }); }.property('selectedcategory') 

how can add empty field in drop-down menu , display products when chosen?

just add prompt value in ember select view:

{{view "select" prompt="all products"                 content=categories                 optionlabelpath="content.name"                 optionvaluepath="content.name"                 value=selectedcategory}} 

and when observe selectedcategory, if user select's prompt, value of selection null.

thus can update filteredproducts computed property take account well:

filteredproducts: function() {     var selectedcategory = this.get('selectedcategory');     var products = this.get('products');     if(selectedcategory) { // return filtered products         return products.filter(function(product) {             return product.get('category.name') === selectedcategory;         });     }     return products;       // return products }.property('selectedcategory')