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：計算屬性（對象）不在視圖中更新

回答

相關問題