Question

我是新手，我正在创建一个搜索过滤应用。我将搜索过滤器“buckets”设置为控制器属性，它们很好地绑定到查询参数。

我正在寻找创建“您选择的过滤器”组件，该组件总结了用户当前处于活动状态的过滤器。我想也许计算属性是这样做的方法？在我的控制器中，我创建了一个名为selectedFilters：

的控制器

export default Ember.Controller.extend(utils, {

    queryParams: ['filter_breadcrumb','filter_price','filter_size_apparel','filter_color'],

    filter_breadcrumb: [],
    filter_price: [],
    filter_size_apparel: [], 
    filter_color: [],

    selectedFilters: Ember.computed('this{filter_breadcrumb,filter_price,filter_size_apparel,filter_color}', function() {
        let filterContainer = {};
        for (let bucket of this.queryParams) {
            let bucketArray = this.get(bucket);
            if (bucketArray.length > 0) { // only add if bucket has values
                filterContainer[bucket] = {
                    'title' : cfg.filterTitles[bucket], // a "pretty name" hash
                    'values' : bucketArray
                };
            }
        }
        return filterContainer;
    })  
});

当用户选择过滤器时，selectedFilters的内容会如下所示：

{ 
    filter_breadcrumb: { title: 'Category', values: [ 'Home > Stuff', 'Garage > More Stuff' ] },
    filter_price: { title: 'Price', values: [ '*-20.0' ] },
    filter_color: { title: 'Color', values: [ 'Black', 'Green' ] } 
}

然后模板将是：

<h1>Selected Filters</h1>
{{#each-in selectedFilters as |selectedFilter selectedValues|}}
    {{#each selectedValues.values as |selectedValue|}}
        <strong>{{selectedValues.title}}</strong>: {{selectedValue}} <br>
    {{/each}}
{{/each-in}}

这实际上有效（有点）。添加和删除过滤器时，视图不会更新。当我对页面进行硬刷时，它们会显示出来。我想知道为什么他们没有更新，即使selectedFilters的“输入”属性呢？

我在想我做错了，或者有更好的方法来做到这一点。任何帮助表示赞赏！

Answer 1

您不能将this用于计算属性相关键，因为它在该范围内未定义。
直接在任何Ember.Object上定义的数组和对象在该对象的所有实例之间共享。所以在init()初始化它。参考initializing instances ember guide

    init(){
     this._super(...arguments);
     this.set('filter_breadcrumb',[]);
    }

使用数组作为依赖键refer ember guide来定义计算属性在您的情况下，如果您希望计算属性重新计算基于添加/删除的数组项或更改为其他数组，请使用.[]

    export default Ember.Controller.extend(utils, {
        queryParams: ['filter_breadcrumb', 'filter_price', 'filter_size_apparel', 'filter_color'],
        init(){
            this._super(...arguments);
            this.set("filter_breadcrumb",[]);
            this.set("filter_price",[]);
            this.set("filter_size_apparel",[]);
            this.set("filter_color",[]);        
        },
        selectedFilters: Ember.computed('filter_breadcrumb.[]','filter_price.[]','filter_size_apparel.[]','filter_color.[]', function() {
            let filterContainer = {};
            for (let bucket of this.queryParams) {
                let bucketArray = this.get(bucket);
                if (bucketArray.length > 0) { // only add if bucket has values
                    filterContainer[bucket] = {
                        'title': cfg.filterTitles[bucket], // a "pretty name" hash
                        'values': bucketArray
                    };
                }
            }
            return filterContainer;
        })
    });

如果您希望根据每个单独的项目更改重新计算计算属性，请考虑filter_price.@each.price

Answer 2

想出来。看来括号扩展对this不起作用。我试过了：

selectedFilters: Ember.computed('this{filter_breadcrumb,filter_price,filter_size_apparel,filter_color}', function() {

和

selectedFilters: Ember.computed('this.{filter_breadcrumb,filter_price,filter_size_apparel,filter_color}', function() {

这适用于：

selectedFilters: Ember.computed('filter_breadcrumb', 'filter_price', 'filter_size_apparel', 'filter_color', function() {

但我仍然想知道这是否是推荐完成“过滤摘要”任务的方法。

Ember：计算属性（对象）未在视图

2 个答案: