4

プロジェクトを Ember 1.13 にアップグレードしようとしていますが、componentの新しい属性の動作について、特にそれらを観察する必要がある場合に少し混乱しています。

たとえば、私のテスト コンポーネントは、外部から渡されるパラメーターであるbarを観察します。Ember の新しい Glimmer エンジンでは、属性が変更されるとコンポーネントが再レンダリングされることを私は知っています。私が理解できないのは、 attrs.barを観察すると、オブザーバーもその時点で起動されるということです(私はbarを変更していません!)。しかし、バー自体を観察すれば問題ありません。

サンプルコード:

HTMLバー:

 {{test-cpnt foo=foo bar=bar}}
 <input type="button" {{action 'tap'}} value="tap"/>

コントローラ：

 foo: 1,
 bar: 100,
 actions: {
   tap: function(){
     this.set('foo', this.get('foo')+1);
   }
 }

成分：

App.TestCpntComponent = Ember.Component.extend({
  barObv1: Ember.observer('bar', function(){
    console.log('bar observer is fired!');
  }),

  barObv2: Ember.observer('attrs.bar', function(){ 
    console.log('attrs.bar observer is fired!');
  }),
});

ボタンをタップしてfooの値を変更すると、 barObv2もトリガーされます。デモ用の jsbin を作成しました: https://jsbin.com/qiwivu/2/edit?js,console,output

オブザーバーがトリガーされた理由を誰かが知っていますか?

4

1 に答える 1

1

Ember 1.13 を使用しているため、オブザーバーを使用する必要はありませんdidUpdateAttrs。属性が更新されるたびにトリガーされるオブザーバーを使用できます。

Ember.Component.extend({
....
 didUpdateAttrs({oldAttrs, newAttrs}) {
   let oldBar = get(oldAttrs, 'bar.value');
   let newBar = get(newAttrs, 'bar.value');

   if (oldBar !== new Bar) {
      // your logic here
   }
 }
....
});

オブザーバーを使用する場合は、次のような変更を監視できます

barDidChange: Ember.observer('bar', function(){ 
 console.log('bar observer is fired!');
});

リッスンはattrs.bar適切に機能しません。属性が更新されるたびに (init を含む)、属性が毎回変更され、オブザーバーがトリガーされます。詳細については、こちらを参照してください。attrsで使用することになっていますangle-bracket components。カーリー コンポーネントに attrs を使用すべきではない理由については、こちらの記事を参照してください。

于 2016-07-18T08:43:04.357 に答える