Actions and Events

components.button-component.js

import Ember from 'ember';

export default Ember.Component.extend({
	tagName: "button",
  
  click() {
    this.sendAction('action');
  }
});

components.dom-events.input-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  attributeBindings: ['placeholder']
});

components.dom-events.input-wrapper.js

import Ember from 'ember';

export default Ember.Component.extend({

});

components.log-output.js

import Ember from 'ember';

export default Ember.Component.extend({
  logger: Ember.inject.service(),
  
  tagName: 'fieldset',
  classNames: ['log-output'],
  
  actions: {
    clear() {
      this.get('logger').clear();
    }
  }
});

components.status-quo.inner-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  logger: Ember.inject.service(),
  
  actions: {

  }
});

components.status-quo.outer-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  logger: Ember.inject.service(),
  
  actions: {

  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  logger: Ember.inject.service(),
  
  actions: {

  }
});

controllers.closure-actions.js

import Ember from 'ember';

export default Ember.Controller.extend({
  logger: Ember.inject.service(),
  
  actions: {

  }
});

controllers.dom-events.js

import Ember from 'ember';

export default Ember.Controller.extend({
  logger: Ember.inject.service(),
  
  actions: {
    change(e) {
      this.get('logger').log('DomEventsController change', e);
    }
  }
});

controllers.status-quo.js

import Ember from 'ember';

export default Ember.Controller.extend({
  logger: Ember.inject.service(),
  
  actions: {

  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('status-quo');
  this.route('closure-actions');
  this.route('dom-events');
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  logger: Ember.inject.service(),
  
  actions: {
    routeAction() {
      this.get('logger').log("ApplicationRoute routeAction", arguments);
    }
  }
});

routes.closure-actions.js

import Ember from 'ember';

export default Ember.Route.extend({
  logger: Ember.inject.service(),
  
  actions: {
    routeAction() {
      this.get('logger').log("ClosureActionsRoute routeAction", arguments);
    }
  }
});

routes.status-quo.js

import Ember from 'ember';

export default Ember.Route.extend({
  logger: Ember.inject.service(),
  
  actions: {    

  }
});

services.logger.js

import Ember from 'ember';

export default Ember.Service.extend({
  logs: Ember.computed(() => []),
  clear() {
    this.set('logs', []);
  },
  log(msg, args) {
    this.get('logs').pushObject(`${msg} ${JSON.stringify(args)}`); 
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

[data-ember-action] {
  cursor: pointer;
}

nav {
  margin-bottom: 1em;
}

.log-output {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}

.active {
  color: black;
  text-decoration: none;
  cursor: default;
}

templates.application.hbs

<h1>Ember Actions Review</h1>
<nav>
  {{link-to 'Status Quo' 'status-quo'}}
  {{link-to 'Closure Actions' 'closure-actions'}}
  {{link-to 'DOM Events' 'dom-events'}}
</nav>

{{outlet}}

{{log-output}}

templates.closure-actions.hbs

{{#closure-actions/outer-component}}
	{{!{{closure-actions/inner-component parentName="outer component yield"}}
{{/closure-actions/outer-component}}

templates.components.button-component.hbs

{{label}}

templates.components.closure-actions.inner-component.hbs

<fieldset>
  <legend>Inner Component (parent: {{parentName}})</legend>
	
  <button>Send Button Action</button>
  
  {{!{{button-component label="Send Button Component Action"}}
</fieldset>

templates.components.closure-actions.outer-component.hbs

<fieldset>
  <legend>Outer Component</legend>
  
  {{closure-actions/inner-component parentName="outer component template"}}
  
	{{yield}}
</fieldset>

templates.components.dom-events.input-component.hbs

{{yield}}

templates.components.dom-events.input-wrapper.hbs

<input placeholder={{placeholder}} />

templates.components.log-output.hbs

<legend>Log (<span {{action (action 'clear')}}>clear</span>)</legend>
{{#each logger.logs as |line|}}
  <div>{{line}}</div>
{{/each}}

templates.components.status-quo.inner-component.hbs

<fieldset>
  <legend>Inner Component (parent: {{parentName}})</legend>
	
  <button>Send Button Action</button>
  
  {{!{{button-component label="Send Button Component Action"}}
</fieldset>

templates.components.status-quo.outer-component.hbs

<fieldset>
  <legend>Outer Component</legend>
  
  {{status-quo/inner-component parentName="outer component template"}}
  
	{{yield}}
</fieldset>

templates.dom-events.hbs

<div>
	<input {{action (action 'change') on='input'}} 
         placeholder="on='input'" />
</div>

<div>
	<input oninput={{action (action 'change')}}
         placeholder="oninput" />
</div>

<div>
	{{dom-events/input-component input=(action 'change') 
                               placeholder="component"}}
</div>

<div>
	{{dom-events/input-wrapper input=(action 'change') 
                             placeholder="wrapped"}}
</div>

<hr>

<div {{action (action (mut isHovered) true) on='mouseEnter'}}
     {{action (action (mut isHovered) false) on='mouseLeave'}}>
	isHovered: {{isHovered}}
</div>

templates.status-quo.hbs

{{#status-quo/outer-component}}
	{{!{{status-quo/inner-component parentName="outer component yield"}}
{{/status-quo/outer-component}}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.13.13",
    "ember-data": "1.13.15",
    "ember-template-compiler": "1.13.13"
  },
  "addons": {}
}