Component actions should have this.sendAction(<actionName>) as default behavior


#1

Say you have a component with three actions that have no internal functionality. It seems pretty redundant to have to specify an action hash on the component like so:

actions: {
  actionOne: function () {
    this.sendAction('actionOne');
  },
  actionTwo: function () {
    this.sendAction('actionTwo');
  },
  actionThree: function () {
    this.sendAction('actionThree');
  }
}

Is there a reason this.sendAction(<actionName>) can’t be the default for any action in a component that doesn’t specify a custom handler?

See: http://emberjs.jsbin.com/fudequta/2/edit

Also, reference: https://github.com/emberjs/ember.js/issues/5209

In response to @tomdale with respect to adding more implicit data flow, I don’t think this use case adds any additional implicitness. This behavior is already essentially present in Ember.View, and to my mind, it doesn’t affect the encapsulation of Ember.Component.


#2

I have the following which I use to bubble actions up & potentially rename them as they go:

var slice = [].slice;
export default var sendAction = function(name) {
  return function() {
    var args;
    args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
    this.sendAction.apply(this, [name].concat(slice.call(args)));
  };
};

Then in my components:

import {sendAction} from 'app/lib/utils';

export default Ember.Component.extend({
  ...
  actions: {
    someAction: sendAction("someAction"),
    otherAction: sendAction("renamedAction")
  }
  ...
});

It cuts down on the boilerplate of bubbling actions a tiny bit, but at the same time keeps them documented in the component itself.


#3

I’m curious why you would rename an action in a component when you have the option to map it to anything you want in the template that consumes it?