CODEWITHSUNDEEP
ember.js
rogergl
rogergl

Reputation: 3771

Specify action for view in template?

I would like to know if it is possible to assign an action to a view like I could assign an action to a HTML tag:

This works:

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

This doesn't:

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

I know that I could implement the click function in the view. But I would like to use the button as some sort of reusable component.

Upvotes: 3

Views: 2684

Answers (1)

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10077

You typically want to use the Handlebars action helper on an HTML element, not on an Ember.View.

Since you want to attach an event to the NewApp.MenuButton View you, define the event in your view class definition. For example, here we handle the click event:

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

If the event you want to attach is not one of the built-in events, you can register your own events. Find the built-in supported events and how to register custom events here: Ember.js - Events

Edit: You say you want to be able to reuse it. You can define a mixin for attaching arbitrary events and targeting arbitrary objects:

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

Include the Mixin in your View:

NewApp.MenuButton = Ember.View.extend(Ember.MyEventAttacher);

And then re-use this view in your templates, making sure to define the action and target properties. Example:

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

Targeting:

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

Upvotes: 4

Related Questions