Ember：嵌套组件事件冒泡 [英] Ember: nested components events bubbling

问题描述

代码在这里： http://emberjs.jsbin.com/hasehija/2/edit 。

HTML：

  {{＃level-1}} 
 {{＃level-2}} 
 {{＃level-3}} 
< button {{action'handleAction'}}> 
点击我（收回）
< / button> 
 {{/ level-3}} 
 {{/ level-2}} 
 {{/ level-1}} 
  

JS：

  App.ApplicationController = Ember.Controller.extend （{
 actions：{
 handleAction：function（）{
 alert（'处理在ApplicationController'）; 
} 
} 
}）; 
 
 App.Level1Component = Ember.Component.extend（{
 actions：{
 handleAction：function（）{
 alert（'Handle in Level 1'）; 
} 
} 
}）; 
 
 App.Level2Component = Ember.Component.extend（{
 actions：{
 handleAction：function（）{
 alert（'Handle in Level 2'）; 
} 
} 
}）; 
 
 App.Level3Component = Ember.Component.extend（{
 actions：{
 handleAction：function（）{
 alert（'在3级处理'）; 
 this.set（'action'，'handleAction'）; 
 this.sendAction（）; 
} 
} 
}）; 
  

我想要实现的是以下列方式来泡泡事件：

Level3Component - > Level2Component - > Level1Component - > ApplicationController

不幸的是，我无法处理任何组件内的事件;事件冒泡到 ApplicationController 。

有没有办法强制组件的动作在整个层次结构中浮动的组件，所以我有警报显示4次（当然添加this.sendAction之后）？

再次，这里是一个可以玩的代码： a href =http://emberjs.jsbin.com/hasehija/2/edit> http://emberjs.jsbin.com/hasehija/2/edit 。

解决方案

根据您的示例，您必须将组件 targetObject 属性定义为：

  App.Level3Component = Ember.Component.extend（{
 action：'handleAction'，
 targetObject：Em.computed.alias 'parentView'），
 actions：{
 handleAction：function（）{
 alert（'在3级处理'）; 
 this.sendAction（）; 
 } 
} 
}）; 
  

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

I've created a set of nested components.

The code is here: 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();
    }
  }
});

What I want to achieve is to bubble the events in the following way:

Level3Component -> Level2Component -> Level1Component -> ApplicationController

Unfortunately, I cannot handle the events inside any of the components; the event bubbled up to ApplicationController.

Is there a way to force Components' actions to bubble over the whole hierarchy of components, so that I have the alert shown 4 times (after adding this.sendAction of course)?

Once again, here's a code that you can play with: http://emberjs.jsbin.com/hasehija/2/edit.

解决方案

Based on your example, you must define the component targetObject property as:

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

这篇关于Ember：嵌套组件事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！