Ember：计算属性（对象）不在视图中更新

我是新来的烬，我正在创建一个搜索过滤应用程序。我有我的搜索过滤器“桶”设置为控制器属性，它们很好地绑定到查询参数。Ember：计算属性（对象）不在视图中更新

我正在创建一个“您选择的过滤器”组件，该组件总结了用户当前活动的过滤器。我在想也许一个计算属性是这样做的方式？在我的控制，我创建一个名为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的“输入”属性呢？

我在想，要么我做错了，或许还有更好的方法来做到这一点。任何帮助感谢！

来源

2017-02-13 tarponjargon

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

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

对于definining使用数组作为因键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; 
     }) 
    });

在情况下，如果你要根据各个项目的变化计算出的属性重新计算然后考虑[email protected]

来源

2017-02-14 03:41:52 kumkanillam

有趣。非常感谢您花时间回答。我学到了很多！ – tarponjargon

想通了。它似乎支架扩展不起作用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() {

但我还是想知道，如果这是我完成的 “过滤器摘要” 任务的推荐方式。

来源

2017-02-13 19:51:21 tarponjargon

Ember：计算属性（对象）不在视图中更新

回答

相关问题