ember.js - 为模板中的视图指定操作？

Question

我想知道是否可以将操作分配给视图，就像我可以将操作分配给 HTML 标记一样：

这有效：

<button {{action "show2" }}>Test 1</button>

这不会：

{{#view NewApp.MenuButton }}
   {{action "show3" target="controller"}}
{{/view}}

我知道我可以在视图中实现点击功能。但我想将按钮用作某种可重用的组件。

Answer 1

您通常希望在 HTML 元素上使用 Handlebars操作助手，而不是在Ember.View.

由于您想将事件附加到您的 NewApp.MenuButton 视图中，请在您的视图类定义中定义事件。例如，这里我们处理click事件：

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

如果您要附加的事件不是内置事件之一，您可以注册自己的事件。在此处查找内置支持的事件以及如何注册自定义事件：Ember.js - 事件

---

编辑：您说您希望能够重用它。您可以定义一个 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);

然后在您的模板中重新使用此视图，确保定义action和target属性。例子：

{{#view NewApp.MenuButton action="show3" target="NewApp.myController"}}
   <!--  ...  -->
{{/view}}

定位：

NewApp.myController = Ember.Controller.create({
   show3: function(event) {
      // the event is sent here!
   }
});