セッターとゲッターで計算されたバグのエバー。

Question

so。

… 
inputs: Ember.A(), 

inputGroup: computed('inputs.[]', { 
    get() { 
     return this.get('inputs').mapBy('value'); 
    }, 
    set(_, values) { 
    # breakpoint 1 
     if (values) { 
     values.forEach(value => { 
      this.get('inputs').addObject({ id: Symbol(), value: value }); 
     }); 
     } 
    # breakpoint 2 
     return this.get('inputs').mapBy('value'); 
    }, 
    }), 
... 

をし、私は私のapp.hbsこのコンポーネントの2を持っている：私は私のcomponent.jsでこれを持って

{{addon-component inputGroup=firstGroup … }} {{addon-component inputGroup=secondGroup … }} 

app.jsで：私の中

… 
firstGroup: Ember.A([’text@text.com’]), 
secondGroup: Ember.A(), 
… 

最初のコンポーネント、デバッガon # breakpoint 1、inputs === []、# breakpoint 2、inputs === ['test@test.com'] 私の2番目のもの、デバッガon # breakpoint 1、すでにinputs === [‘text@text.com’]。 これはどのように可能ですか？

Answer 1

コンポーネントに直接配列やオブジェクトを宣言しないでください。このように宣言された配列またはオブジェクトは、コンポーネントインスタンス間で共有されます。 initフックの中でそれらを宣言する必要があります。そうすれば、それらはすべてのコンポーネントインスタンスに対して独立して設定されます。したがって、このように入力を宣言する必要があります。 the guideから

//inside component 
init() { 
    this._super(...arguments); 
    this.set('inputs', Ember.A()); 
} 

：任意Ember.Objectに直接定義

配列やオブジェクトは、そのオブジェクトのすべてのインスタンス間 を共有しています。