Ember.js 1.13: как правильно отслеживать переданный атрибут компонента?

Я пытаюсь обновить свой проект до Ember 1.13, и меня немного смущает поведение новых attrs component, особенно когда я должен их наблюдать.

Например, мой тестовый компонент наблюдает за параметром bar, который передается извне. Я знаю, что в новом движке Ember Glimmer компонент перерисовывается при изменении любого из его атрибутов. Чего я не могу понять, так это того, что наблюдатель также будет уволен в это время, если я увижу attrs.bar (я не модифицировал 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

Кто-нибудь знает, почему наблюдатель сработал?


ember.js ember-components ember-observable
person starshine wang    schedule 13.08.2015    source источник
comment
ваш jsbin, кажется, не работает для меня, но я переношу его на twiddle, чтобы лучше понять ваш вопрос: ember-twiddle .com/acb8cbf30c7dbbd0a4b2   -  person Joe B    schedule 10.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

Что ж, вам не нужно использовать наблюдателей, так как вы находитесь в 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 не будет работать должным образом, всякий раз, когда атрибут обновляется (включая инициализацию), атрибуты мутируются каждый раз, что вызывает срабатывание наблюдателей, для получения дополнительной информации см. здесь. attrs предполагается использовать с angle-bracket components. Вот хорошая статья, почему мы не должны использовать attrs для фигурных компоненты.

person siva - abc    schedule 18.07.2016