在以下代码中,我的单击事件委托,并且我的视图层次结构中的所有三个'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作为测试的例子。
答案 0 :(得分:2)
看起来就像你一周前发布的那个问题一样。据我所见,这个功能并没有在ember中实现。该事件将传播到视图层次结构,但操作名称将丢失,并且会触发默认的click
处理程序。
我找到的唯一解决方法是重新打开Ember.View类本身,并覆盖点击处理程序,如下所示:
Ember.View.reopen({
click: function(event){
if(event.view !== this && this[event.actionName]){
return this[event.actionName](event);
}
}
})
请看这里的小提琴: