Как управлять порядком выполнения наблюдателя компонента ember?

Question

У меня есть компонент внутри компонента. У дочернего компонента есть два свойства, переданные через шаблон. Эти свойства имеют отдельные наблюдатели в компоненте child.js.

Когда я обновляю связанные свойства в родительском компоненте в определенном порядке, наблюдатели дочернего компонента срабатывают в неправильном порядке.

Как я могу контролировать порядок, в котором наблюдатели срабатывают в дочернем компоненте?

Мой конкретный случай.

Было указано на то, что наблюдателям больше не нужно. Но они все еще существуют в ember 2.0, поэтому они должны быть использованы для них. Я объясню свою ситуацию так или иначе, и, надеюсь, мудрее вас могут дать мне знать, как это сделать без наблюдателей.

В моем случае, parent component - это меню для игры, содержащее множество подменю. Чтобы переключаться между каждым подменю, я использую слайд-анимацию, так что текущее меню исчезает с экрана, и новое меню включает обмен двух анимационных меню внутрь и при необходимости. Это выполняется в компоненте бокового переключателя (ребенок в этом случае).

меню родительского содержит вкладки, которые при нажатии, нужно, чтобы сообщить ребенка боковой переключатель компонента, который должен теперь быть показанным подменю, и в каком направлении, чтобы скользить (два свойства). Сначала нужно настроить направление, а затем подменю с тех пор, когда подменю будет изменено, вот что запускает фактическую анимацию. Ember 2.0 философия утверждает, что действия не могут опускаться, но данные (свойства) могут, поэтому наблюдаемые свойства - это путь, по которому я спускаюсь.

Обратите внимание, что в моем случае использования на самом деле есть только свойство меню, которое наблюдается, но при отладке я также должен был наблюдать свойство направления, так как мои меню скользят неправильно по всему месту.

Answer 1

Спасибо Artych, это был действительно крючок didUpdateAttrs, который решил мою проблему, так как мне нужно иметь возможность реагировать на все изменения одного из атрибутов, разделенных на инициализацию.

Учитывая компонент потребляются как так:

{{my-component myAttr=changeableAttr myOtherAttr=otherAttr}} 

В component.js:

didUpdateAttrs(options){ 

    if(options.newAttrs.myAttr !== options.oldAttrs.myAttr){ 

     // React to changes outside the component 

    } 

}, 

Это срабатывает после того, как все изменения атрибутов в любой момент цикла выполнения, и позволяет обрабатывать в компонент в любом порядке.

Это также ответило на вопрос о том, как отправлять действия для компонентов для меня, а точнее, как заставить компонент реагировать на внешние изменения.

Для полноты я разработал, как изменить порядок, в котором наблюдаются также: это просто порядок, который они определены на компоненте в шаблоне. Это довольно плохой дизайн, чтобы полагаться на это, поэтому имеет смысл, что существует гораздо лучшее решение в виде didUpdateAttrs или didReceiveAttrs.

Answer 2

Направление должно быть установлено первым, а затем в подменю, так как при изменении подменю, это то, что вызывает реальную анимацию. Ember 2.0 философия утверждает, что действия не могут опускаться, но данные (свойства) могут, поэтому наблюдаемые свойства - это путь, по которому я спускаюсь.

Я думаю, вы могли бы избавиться от наблюдателей, используя didInitAttrs и didReceiveAttrs крючки. Эти крючки помогают обрабатывать атрибуты вместе, не задумываясь о порядке. Подробности: http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_component-lifecycle-hooks

Позвольте дочернему компоненту иметь атрибуты direction и submenu.

//parent component template 
{{child-component direction=direction submenu=submenu}} 

Вы можете получить атрибуты от getAttr и процесса, как вам нужно:

// child component 
direction: defaultValue, 
submenu: defaultValue, 

didReceiveAttrs() { 
// your logic 
this.set('direction', this.getAttr('direction') || defaultDir); 
this.set('submenu', this.getAttr('submenu') || defaultSumbenu); 
} 

Предупреждение: Теперь направляющие Ember и документы не имеют объяснения жизненного цикла крючков. В качестве рабочего примера можно было бы рассмотреть ember-collection addon code.