目标事件代表团

时间:2012-10-23 09:16:21

标签: ember.js

在以下代码中,我的单击事件委托,并且我的视图层次结构中的所有三个'click'处理程序都被触发。

但是,我还要在整个视图层次结构中触发'edit''edit'只是我'子'视图中元素的目标。

模板

<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');        
  }

});​

是否无法在视图层次结构中委派目标处理程序?我想要做的是:

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.
  }
});​

这是一个jsFiddle作为测试的例子。

1 个答案:

答案 0 :(得分:2)

看起来就像你一周前发布的那个问题一样。据我所见,这个功能并没有在ember中实现。该事件将传播到视图层次结构,但操作名称将丢失,并且会触发默认的click处理程序。

我找到的唯一解决方法是重新打开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/