Question

我创建了一组嵌套组件。

代码在这里：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。

有没有办法强制组件＆＃39;泡在整个组件层次结构上的动作，以便我有4次显示警报（当然在添加this.sendAction之后）？

再一次，您可以使用以下代码：http://emberjs.jsbin.com/hasehija/2/edit。

Answer 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

Answer 2

如果我正确理解了这个问题，this question is related并且答案显示了如何从模板中执行此操作 - 您可以这样做：

{{#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视为特殊关键字...无论如何，使用{{模板中的1}}不起作用（这让我困惑，但无论如何）。

Ember：嵌套组件事件冒泡

2 个答案: