New Twiddle

controllers.application.js

import Ember from 'ember';

const { computed } = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  firstName: 'Godfrey',
  lastName: 'Chan',
  fullName: computed('firstName', 'lastName', function() {
    let { firstName, lastName } = this;
  	return `${firstName} ${lastName}`;
  }),
  
  preferFirstName: true,
  
  preferredName: computed('firstName', function() {
    return this.firstName;
  }),

  displayName: computed('preferFirstName', 'preferredName', 'firstName', function() {
    return this.preferFirstName ? this.firstName : this.preferredName;
  })
});

templates.application.hbs

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

<p><label>First Name: {{input value=firstName}}</label></p>
<p><label>Last Name: {{input value=lastName}}</label></p>
<p>Full Name: {{fullName}}</p>

<hr>

<p><label>{{input type="checkbox" checked=preferFirstName}} You may call me {{firstName}}</label></p>

{{#unless preferFirstName}}
  <p><label>Preferred Name: {{input value=preferredName}}</label></p>
{{/unless}}

<hr>

<p><strong>Okay, we will call you {{displayName}}</strong></p>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {
    	"ember-metal-es5-getters": true
    }
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "canary",
    "ember-template-compiler": "canary",
    "ember-testing": "canary"
  }
}