Ember：嵌套组件事件冒泡

Posted 2023-02-23

【中文标题】Ember：嵌套组件事件冒泡

【英文标题】：Ember: nested components events bubbling

【发布时间】：2014-07-26 06:36:22

【问题描述】：

我创建了一组嵌套组件。

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

【讨论】：

谢谢！它完全回答了我的问题！我想知道最内部按钮的东西是否真的是一个错误。

嗯，这可能不是错误...“单击我（在组件内部）”按钮调用Level3Component，而不是Level2Component，所以恰好在它被定义的地方。我认为这是一种适当的行为。

我说的是“点击我（已生成）”，它应该针对组件而不是 ApplicationController

我错了，这是默认行为。有一个测试描述了这种情况“在产量内，目标指向原始目标”github.com/emberjs/ember.js/blob/master/packages/ember-routing/…

【参考方案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 视为特殊关键字...无论如何，在模板中使用parentView 没有'不起作用（这让我很困惑，但无论如何）。