控制器中的过滤器值

Question

我想过滤products，具体取决于所选的category，可以通过下拉菜单选择它。 products通过belongsTo category

• 我有什么在控制器改变取决于下拉菜单中选择的值来过滤products？
• 如何在下拉菜单中添加空白字段并在选择时显示所有产品？

这里是当前灰烬CLI代码：

应用程序/路由/ index.js

import Ember from 'ember'; 

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

应用程序/控制器/ 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 /模板/ 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}} 

应用程序/模型/ product.js

import DS from 'ember-data'; 

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

应用程序/模型/ category.js

import DS from 'ember-data'; 

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

Answer 1

什么我必须在控制器中更换过滤器产品 取决于下拉菜单的选定值？

您可以创建一个过滤产品，如一个计算性能：

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') 

我怎样才能在下拉菜单中添加一个空场，并在选择时，它显示所有 产品？

在灰烬只需添加prompt价值选择视图：

{{view "select" prompt="All products" 
       content=categories 
       optionLabelPath="content.name" 
       optionValuePath="content.name" 
       value=selectedCategory}} 

然后当你观察selectedCategory，如果用户选择的提示，选择的值将是null。

因此，你可以更新filteredProducts计算的属性考虑到这一点，以及：

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 all products 
}.property('selectedCategory')