Как обработать событие в дочернем компоненте, ember.js?

Question

[Klaus Kater]

Здравствуйте.
Есть компонент внутри которого куча других, на этой куче может происходить событие, и я хочу обработать это событие одним, самым главным компонентом. Подскажите как это сделать? Т.е. нужно из дочернего компонента запустить событие в родительском, сохранив информацию откуда взялось событие.

export default Ember.Component.extend({
    actions: {
         open(obj){
           console.log('OPEN');
        },
});
export default Ember.Component.extend({ // дочерние компоненты
       alarm(){
           this.send('open', this);
       },
});

Answer 1

[Andy Developer]

{{child-component open=(action "open")}}

вроде так?

emberjs.com/api/classes/Ember.Component.html#metho...

компонент родитель

test(obj){
      console.log(obj);
    }

{{child-component test=(action "test") }}

дочерний компонент

open(){
      console.log('child fired');
      this.sendAction('test', this);

    }

<a href="#" {{action 'open'}}>Тест</a>

вот, только что протестил у себя, ember 2.7

Answer 2

[Станислав Романов]

export default Ember.Component.extend({
    actions: {
         open(obj){
           console.log('OPEN');
        },
    },
});

export default Ember.Component.extend({ // дочерние компоненты
       alarm(){
           this.sendAction('alarm', this);
       },
});

/app/templates/components/parent-component.hbs
{{yield this}}

{{#parent-component as |parent|}}
    {{child-component alarm=(action "open" target=parent)}}
{{/parent-component}}

Answer 3

[Klaus Kater]

А нет вариантов не тянуть явным способом событие через компоненты, если их большое дерево, каждый надо вызывать с передачей экшна...
Я думал через сервис сделать, но передать событие в сервис можно, а из сервиса - опять проблема.

в общем пока натворил костыль, стыдно, но работает.

export default Ember.Service.extend({
    stack_view:[],
    open(obj){
    },
});

export default Ember.Component.extend({
    manager: Ember.inject.service(),
    init:function(){
         this.get('manager').set('open', this.open);
    },
    actions: {
         open(obj){
           console.log('OPEN');
        },
});
export default Ember.Component.extend({ // дочерние компоненты
       manager: Ember.inject.service(),
       actions: {
        open(){
          this.get('manager').open(this);
        },
      }
});

Comments

[Andy Developer]

Может использовать ember.mixin, запилить mixin с экшенами и миксить в компоненты ?