Javascript 余烬：嵌套组件事件冒泡

我已经创建了一组嵌套组件

代码在这里：

HTML:

我想要实现的是通过以下方式使事件泡泡化：

Level3Component->Level2Component->Level1Component->ApplicationController

不幸的是，我无法处理任何组件中的事件；事件冒泡出现在

ApplicationController

中

有没有一种方法可以强制组件的操作在整个组件层次结构上冒泡，从而使警报显示4次（当然是在添加this.sendAction之后）

---

同样，这里有一个可以使用的代码：。

根据您的示例，必须将组件

targetObject

属性定义为：

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

---

如果我正确理解了问题，并且答案显示了如何从模板中执行此操作--您可以执行以下操作：

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

{{{一级}
{{{#二级targetObject=view}
{{{#级别3 targetObject=view}
单击我（已放弃）
{{/级别3}}
{{/二级}
{{/级别1}}

如果您不控制内部组件，或者不想像其他答案那样直接修改它们，那么就很方便

---

我想你之所以在这里说

view

而不是在上面的答案中说

parentView

，是因为把手把

view

当作一个特殊的关键字……无论如何，在模板中使用

parentView

都不起作用（这让我很困惑，但无论如何）。

谢谢！它完全回答了我的问题！我想知道最里面的按钮是否真的是个bug。嗯，可能不是bug。。。“单击我（组件内部）”按钮调用的是

Level3Component

，而不是

Level2Component

，因此它正好位于定义位置。我认为这是一个正确的行为。我说的是“单击我（屈服）”，它应该以组件为目标，而不是应用程序控制器。我错了，这是默认行为。有一个测试描述了这种情况“在收益率内，目标指向原始目标”

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

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