Ember.js 是否为模板中的视图指定操作?
我想知道是否可以将操作分配给视图,就像将操作分配给HTML标记一样: 这项工作:Ember.js 是否为模板中的视图指定操作?,ember.js,Ember.js,我想知道是否可以将操作分配给视图,就像将操作分配给HTML标记一样: 这项工作: <button {{action "show2" }}>Test 1</button> 我知道我可以在视图中实现单击功能。但是我想将按钮用作某种可重用组件。您通常希望在HTML元素上使用把手,而不是在Ember.View上使用把手 由于要将事件附加到NewApp.MenuButton视图,请在视图类定义中定义该事件。例如,这里我们处理单击事件: NewApp.MenuButton = Em
<button {{action "show2" }}>Test 1</button>
我知道我可以在视图中实现单击功能。但是我想将按钮用作某种可重用组件。您通常希望在HTML元素上使用把手,而不是在
Ember.View上使用把手
由于要将事件附加到NewApp.MenuButton视图,请在视图类定义中定义该事件。例如,这里我们处理单击事件:
NewApp.MenuButton = Ember.View.extend({
click: function(event){
// When the user clicks this view,
// this function will be called.
// ... handle the click
App.myController.menuButtonWasClicked();
}
});
如果要附加的事件不是内置事件之一,则可以注册自己的事件。在此处查找内置支持的事件以及如何注册自定义事件:
编辑:您说希望能够重用它。您可以定义用于附加任意事件和以任意对象为目标的mixin:
Ember.MyEventAttacher = Ember.Mixin.create({
init: function() {
var action = this.get('action');
target = this.get('target'),
targetObj = Ember.getPath(target);
if (action && targetObj) {
var targetEventFnc = targetObj[action];
if (typeof targetEventFnc === 'function') {
var actionFnc = function(event) {
targetEventFnc(event);
}
this.set(action, actionFnc);
}
this._super();
}
});
在视图中包括Mixin:
NewApp.MenuButton = Ember.View.extend(Ember.MyEventAttacher);
然后在模板中重新使用此视图,确保定义操作
和目标
属性。例如:
{{#view NewApp.MenuButton action="show3" target="NewApp.myController"}}
<!-- ... -->
{{/view}}
谢谢这很有帮助。我只是对它做了一些修改,因为我只对click事件感兴趣。已经有这样一个mixin,即Ember.TargetActionSupport:
{{#view NewApp.MenuButton action="show3" target="NewApp.myController"}}
<!-- ... -->
{{/view}}
NewApp.myController = Ember.Controller.create({
show3: function(event) {
// the event is sent here!
}
});