Ember Twiddle sample

application.hbs

<h1>Ember Twiddle Gist demo</h1>
{{outlet}}

components.big-red-text.hbs

<h2 style="color:red;">{{yield}}</h2>

index.controller.js

import Ember from 'ember';
 
export default Em.Controller.extend({
  userName: null,
  prettyUserName: function() {
    return this.get('userName') ? this.get('userName') : 'everyone';
  }.property('userName')
});

index.template.hbs

<h3>Hi {{controller.prettyUserName}}!</h3>
{{input value=controller.userName  placeholder="Your name"}}
{{#big-red-text}}All the magic happens in your browser{{/big-red-text}}

styles.app.css

body{font-family:Arial; color: #666;}
h1 {font-size:18px;}