Action Test w/ ES Classes

controllers.application.js

import Controller from '@ember/controller';
// import { action } from '@ember-decorators/object';

// decorators and class properties are not supported by twiddle
export default class extends Controller {
  // appName = 'Ember Twiddle';
  
  constructor() {
    super(...arguments);
    
    this.appName = 'Ember Twiddle';
    this.classProperty = () => {
      console.log('classProperty', this.appName); 
    }
  }
  
  // classProperty = () => {
  //   console.log('classProperty', this.appName); 
  // }
  
  func() {
    console.log('func', this.appName);
  }
  
  // @action
  // decorated() {
  //   console.log('decorated', this.appName); 
  // }
  
  // actions = {
  //   traditionalAction() {
  //     console.log('traditionalAction', this.appName); 
  //   }
  // }
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

Using a class property:<br />
<button {{action classProperty}}>action classProperty</button>
<button {{action 'classProperty'}}>action 'classProperty'</button>

<br>
<br>

Using a normal class function:<br />
<button {{action func}}>action func</button>
<button {{action 'func'}}>action 'func'</button>

<br>
<br>

Using a traditional action defined in the actions hash:<br />
<button {{action traditionalAction}}>action traditionalAction</button>
<button {{action 'traditionalAction'}}>action 'traditionalAction'</button>

<br>
<br>

Using the @action decorator:<br />
<button {{action decorated}}>action decorated</button>
<button {{action 'decorated'}}>action 'decorated'</button>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.0",
    "ember-template-compiler": "3.2.0",
    "ember-testing": "3.2.0",
    "@ember-decorators/babel-transforms": "^2.0.0",
    "ember-decorators": "^2.0.0"
  },
  "addons": {
    "ember-data": "3.1.1"
  }
}