目标事件委托 [英] Event delegation for target

问题描述

在以下代码中，我的视图层次结构中的点击事件代理和所有三个点击处理程序被触发。

但是，我也想在整个视图层次结构中启动编辑。 编辑仅仅是我小孩视图中元素的目标。

模板

 < script type =text / x-handlebars> 
 {{#view App.GrandparentView}} 
 {{#view App.ParentView}} 
 {{#view App.ChildView}} 
< span {{action编辑target =view}}>单击我< / span> 
 {{/ view}} 
 {{/ view}} 
 {{/ view}} 
< / script> 
  

JavaScript

  App.GrandparentView = Ember.View.extend（{
 click：function（）{
 console.log（'Grandparent Click Fired！ '）; 
}，
编辑：function（）{
 console.log（'GrandParent edit fired'）; 
} 
}）; 
 App.ParentView = Ember.View.extend（{
 click：function（）{
 console.log（'Parent Click Fired！'）; 
}，
编辑：function（）{
 console.log（'Parent edit fired'）; 
} 
 
}）; 
 App.ChildView = Ember.View.extend（{
 click：function（）{
 console.log（'Child Click Fired！'）; 
}，
编辑：function（）{
 console.log（'Child edit fired'）; 
} 
 
}）; 
  

没有办法在视图层次结构中委派目标处理程序？

  App.ChildView = Ember.View.extend {
 click：function（）{
 console.log（'Child Click Fired！'）; 
}，
 edit：function（）{
 console.log （'Child edit fired'）; 
 this.get（'parentView'）。edit（）; //不要这样做
} 
}）; $ b $这是一个 jsFiddle 作为测试的例子。
解决方案
看起来你发布的同样的问题一个星期前。据我所见，这种功能并没有在ember中实现。事件被传播到视图层次结构，但是操作名称丢失，并且触发默认的点击处理程序。
 
 
 
我发现唯一的解决方法是重新打开Ember.View类本身，并覆盖点击处理程序，如下所示：
  Ember .View.reopen（{
 click：function（event）{
 if（event.view！== this&& this [event.actionName]）{
 return this [event .actionName]（event）; 
} 
} 
}）
  
在这里看到小提琴：
 
 
 
  http：// jsfiddle.net/Sly7/zZyCS/  
 
In the following code, my click events delegate and all three 'click' handlers in my view hierarchy get fired. 

However, I also want to fire 'edit' in my entire view hierarchy. 'edit' is simply the target of an element in my 'child' view.

Template
<script type="text/x-handlebars">
  {{#view App.GrandparentView}}
    {{#view App.ParentView}}
        {{#view App.ChildView}}
           <span {{action "edit" target="view"}}>Click Me</span>
        {{/view}}    
    {{/view}}
  {{/view}}
</script>
​
JavaScript
App.GrandparentView = Ember.View.extend({
  click: function() {
    console.log('Grandparent Click Fired!');
  },
  edit: function () {
   console.log('GrandParent edit fired');        
  }
});
App.ParentView = Ember.View.extend({
  click: function() {
    console.log('Parent Click Fired!');
  },
  edit: function () {
    console.log('Parent edit fired');        
  }

});
App.ChildView = Ember.View.extend({
  click: function() {
    console.log('Child Click Fired!');
  },
  edit: function () {
    console.log('Child edit fired');        
  }

});​
Is there no way to delegate the target handlers in the view hierarchy? What I dont want to do is this:
App.ChildView = Ember.View.extend({
  click: function() {
    console.log('Child Click Fired!');
  },
  edit: function () {
    console.log('Child edit fired');        
    this.get('parentView').edit(); //DO NOT WANT TO DO THIS.
  }
});​
Here is a jsFiddle as an example to test.
解决方案
It looks like the same question you've posted about a week ago. As far as I can see, such feature is not implemented in ember. The event is propagated to the view hierarchy, but the action name is lost, and the default click handler is triggered.

The only workaround I found is to reopen the Ember.View class itself, and override the click handler like this:
Ember.View.reopen({
  click: function(event){
    if(event.view !== this && this[event.actionName]){
        return this[event.actionName](event);
    }
  }
})
See the fiddle here:

http://jsfiddle.net/Sly7/zZyCS/

                        
这篇关于目标事件委托的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！