Closure Actions

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Closure Actions',
  
  value: '',
  
  buttonText: 'click me',
  
  todos: [],
  
  posts: [],
  
  number: '',
  
  actions: {
   	doSomething(e) {
      this.set('selectedSong', e);
    },
    doSomethingElse(e) {
     console.log(e); 
    },
    addTodo() {
     this.get('todos').pushObject(this.get('todo'));
      this.set('todo', '');
    },
    removeTodo(todo) {
     this.get('todos').removeObject(todo); 
    },
    addPost(post) {
     	this.get('posts').pushObject({title: this.get('title'), body: this.get('body')}); 
    },
    calculate() {
      const num = parseInt(this.get('number'));
      console.log(num);
      if (!isNaN(num)) {
        this.set('timesTwo', num *2 );
      } else {
       	this.set('timesTwo', 'Enter a valid number') 
      }
    	this.set('number', '');
    }
  }
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return ['The Four Horsemen', 'Ride the Lightning', 'Master of Puppets']
  }
});

application.template.hbs

{{!--
  <button onclick={{action "sayHi"}}></button>
  {{my-button action=(action "sayHi")}}
--}}

<ul>
  {{#each model as |song|}}
    <li onMouseOver={{action 'doSomething' song}} onClick={{action 'doSomethingElse' song}}>{{song}}</li>
  {{/each}}
</ul>

Selected song: {{selectedSong}}

<hr>
<h1>Add Todo</h1>
{{input type="text" value=todo}}<button onClick={{action 'addTodo'}}>Add Todo</button>

<ul>
  {{#each todos as |todo| }}
    <li {{action 'removeTodo' todo}}>{{todo}}</li>
  {{/each}}
</ul>

<hr />

<h1>Add Post</h1>
<div>{{input value=title}}</div>
<br />
<br />
<div>{{textarea value=body}}</div>
<button onclick={{action 'addPost'}}>Add Post</button>

<ul>
  {{#each posts as |post| }}
    <li>{{post.title}}<br />{{post.body}}</li>
  {{/each}}
</ul>

<hr>

{{input value=number}} x2 = {{timesTwo}}
{{my-component on-click=(action 'calculate')}}

my-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  text: 'click me',
  
  actions: {
  	set() {
    	this.get('on-click')(); 
    }
  }
});

my-component.template.hbs

<button {{action 'set'}}>{{text}}</button>

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js",
    "ember": "release",
    "ember-data": "release",
    "ember-template-compiler": "release"
  }
}