javascriptember.js

How can I trigger an action programmatically?


I have this view

App.ApplicationView = Em.View.extend({
  templateName: 'application',

  actions: {
    myAction: function() {
      //
    }
  }
});

Suppose I want to trigger manually that action from another view method, such as didInsertElement, like:

App.ApplicationView = Em.View.extend({
  templateName: 'application',

  actions: {
    sidebarShowHome: function() {
      this.set('sidebarIsHome', true);
      this.set('sidebarIsNotifications', false);
      this.set('sidebarIsArchive', false);
    },
  },
    
  didInsertElement: function() {
    this.actions.sidebarShowHome();
  }
});

How could I do it? this.actions is undefined from within a view method.


Solution

  • You can use the TargetActionSupport mixin along with this.triggerAction:

    App.ApplicationView = Ember.View.extend(Ember.TargetActionSupport, {
      templateName: 'application',
      actions: {
        myAction: function() {
          console.log('myAction');
        }
      },
      didInsertElement: function() {
        this.triggerAction({
          action:'myAction',
          target: this
        });
      }
    });
    

    By default using this.triggerAction() without parameters will send the action to the controller, however if you need to target a different destination define the target option as shown in the example.

    Working demo.

    Hope it helps.