Ember: события вложенных компонентов, пузырящиеся

Я создал набор вложенных компонентов.

Код здесь: http://emberjs.jsbin.com/hasehija/2/edit.

HTML:

{{#level-1}}
    {{#level-2}}
      {{#level-3}}
        <button {{action 'handleAction'}}>
          Click me (yielded)
        </button>
      {{/level-3}}
    {{/level-2}}
 {{/level-1}}

JS:

App.ApplicationController = Ember.Controller.extend({
  actions: {
    handleAction: function() {
      alert('Handled in ApplicationController');
    }
  }
});

App.Level1Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 1');
    }
  }
});

App.Level2Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 2');
    }
  }
});

App.Level3Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 3');
      this.set('action', 'handleAction');
      this.sendAction();
    }
  }
});

То, что я хочу достичь, состоит в том, чтобы пузырить события следующим образом:

Level3Component -> Level2Component -> Level1Component -> ApplicationController

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

Есть ли способ принудительно активировать действия компонентов для всей иерархии компонентов, так что я показываю это предупреждение 4 раза (после добавления this.sendAction, конечно)?

Еще раз, вот код, с которым вы можете играть: http://emberjs.jsbin.com/hasehija/2/edit.

Ответ 1

На основе вашего примера вы должны определить свойство компонента targetObject как:

App.Level3Component = Ember.Component.extend({
  action: 'handleAction',
  targetObject: Em.computed.alias('parentView'),  
  actions: {
    handleAction: function() {
      alert('Handled in Level 3');
      this.sendAction();
    }
  }
});

http://emberjs.jsbin.com/hasehija/5/edit

Ответ 2

Если я правильно понял вопрос, этот вопрос связан, и ответ показывает, как вы можете сделать это из шаблона - вы можете сделать:

{{#level-1}}
    {{#level-2 targetObject=view}}
      {{#level-3 targetObject=view}}
        <button {{action 'handleAction'}}>
          Click me (yielded)
        </button>
      {{/level-3}}
    {{/level-2}}
 {{/level-1}}

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

Я думаю, что причина, по которой вы говорите view здесь вместо parentView в приведенном выше ответе, объясняется тем, что Handlebars обрабатывает view как специальное ключевое слово... в любом случае, используя parentView в шаблоне didn ' (что меня озадачивает, но что угодно).