Actions examples

application.template.hbs

<header>
  <h1>Actions examples</h1>
  
  <nav>
    {{#link-to 'example-1'}}
      <small>Example 1</small>
      Naked functions
    {{/link-to}}
    {{#link-to 'example-2'}}
      <small>Example 2</small>
      Undefined this
    {{/link-to}}
    {{#link-to 'example-3'}}
      <small>Example 3</small>
      Function.bind
    {{/link-to}}
    {{#link-to 'example-4'}}
      <small>Example 4</small>
      \{{action}} helper
    {{/link-to}}
    {{#link-to 'example-5'}}
      <small>Example 5</small>
      actions hash
    {{/link-to}}
    {{#link-to 'example-6'}}
      <small>Example 6</small>
      action args
    {{/link-to}}
    {{#link-to 'example-7'}}
      <small>Example 7</small>
      nested actions
    {{/link-to}}
    {{#link-to 'example-8'}}
      <small>Example 8</small>
      curried args
    {{/link-to}}
  </nav>
</header>

<div class='padded'>
  {{outlet}}
</div>

example-1.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  showMessage() {
    alert('You clicked me!');
  }

});

example-1.template.hbs

<button onclick={{showMessage}}>
  Click me
</button>

example-2.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  counter: 0,
  
  incrementCounter() {
    this.incrementProperty('counter');
  }
  
});

example-2.template.hbs

<button onclick={{incrementCounter}}>
  Click me!
</button>

<p>The counter is {{counter}}</p>

example-3.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  counter: 0,
  
  init() {
    // Bind our function so `this` is properly set
    this.incrementCounter = this.incrementCounter.bind(this);
  },
  
  incrementCounter() {
    this.incrementProperty('counter');
  }
  
});

example-3.template.hbs

<button onclick={{incrementCounter}}>
  Click me!
</button>

<p>The counter is {{counter}}</p>

example-4.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  counter: 0,
  
  incrementCounter() {
    this.incrementProperty('counter');
  }
  
});

example-4.template.hbs

<button onclick={{action incrementCounter}}>
  Click me!
</button>

<p>The counter is {{counter}}</p>

example-5.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  counter: 0,
  
  actions: {
    incrementCounter() {
      this.incrementProperty('counter');
    }
  }
  
});

example-5.template.hbs

<button onclick={{action 'incrementCounter'}}>
  Click me!
</button>

<p>The counter is {{counter}}</p>

example-6.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  counter: 0,
  
  actions: {
    incrementCounterBy(val) {
      this.set('counter', this.get('counter') + val);
    }
  }
  
});

example-6.template.hbs

<button {{action 'incrementCounterBy' 2}}>
  Add 2
</button>

<button {{action 'incrementCounterBy' 4}}>
  Add 4
</button>

<p>The counter is {{counter}}</p>

example-7.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  counter: 0,
  
  actions: {
    incrementCounterBy(val) {
      this.set('counter', this.get('counter') + val);
    }
  }
  
});

example-7.template.hbs

<button {{action (action 'incrementCounterBy' 2)}}>
  Add 2
</button>

<p>The counter is {{counter}}</p>

example-8.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  counter: 0,
  
  actions: {
    incrementCounterBy(...args) {
      let total = args.reduce((memo, el) => memo + el);
      
      this.set('counter', this.get('counter') + total);
    }
  }
  
});

example-8.template.hbs

<button {{action (action 'incrementCounterBy' 2) 4}}>
  Add 2 then 4
</button>

<button {{action (action (action 'incrementCounterBy' 5) 9) 2}}>
  Add 5 then 9 then 2
</button>

<p>The counter is {{counter}}</p>

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('example-1');
  this.route('example-2');
  this.route('example-3');
  this.route('example-4');
  this.route('example-5');
  this.route('example-6');
  this.route('example-7');
  this.route('example-8');
});

export default Router;

styles.app.css

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
header {
  background: #333;
  color: white;
  padding: 15px;
}
h1 {
  text-align: center;
}
nav {
  display: flex;
  flex-direction: column;
}
nav a {
  color: #999;
  text-decoration: none;
  margin: 5px 20px;
  font-size: 18px;
}
nav a:hover,
nav a.active {
  color: white;
}
nav small {
  text-transform: uppercase;
  font-size: 13px;
  padding-right: 10px;
}
.padded {
  padding: 30px;
}

twiddle.json

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