chriskrycho

import Controller from '@ember/controller';
import { get, set } from '@ember/object';

export default class ApplicationController extends Controller {
  root = 'root state';

  get derived() {
    return `derived state derived from ${get(this, 'root')}`;
  }

chriskrycho

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

chriskrycho

Job State
  Job Title*
    NEXT -> Job Match
  Job Match
    BACK -> Job Title
    
    Unselected*
      SELECT_CLAIMABLE -> Job Claim
      SELECT_SHAREABLE -> Job Share
      CREATE_JOB -> Job Description

chriskrycho

<div>
  {{@body}}
  ({{if this.isExpired "expired" "pending"}}<!--
-->{{#unless this.isExpired}} [{{this.timeLeft}}]{{/unless}})
</div>

chriskrycho

import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  model() {
    return "I'm sorry Dave, I can't do that.";
  }
}

chriskrycho

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

class TAD {
  @tracked state = [0];

  get isLoaded() {
    return this.state[0] === 1;
  }

chriskrycho

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  @service whatToRender;
  @tracked value = true;

  toggle = () => {
    this.value = !this.value;

chriskrycho

<p>Look ma a component</p>

chriskrycho

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

  keydownHandler = ({ target: { value } }) => {
    alert(`tada 🎉: ${value}`);
  };
}

chriskrycho

<p>Same? {{this.isEq}}</p>
<p>(rendered: @foo.a = "{{@foo.a}}", @foo.b = "{{@foo.b}}")</p>