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.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.1.1",
    "ember-decorators": "2.0.0"
  }
}