Welcome-like component

components.example-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  // It's key to understand that this is a
  // "hash" of properties...
  // and not a block for javascript (see click)
  
  // Element
  tagName: 'asisde',
  classNames: ['example-component'],

  // Attributes
  greeting: 'Hey',
  name: 'AshaM',
  selected: false,
  
  // Styles
  classNameBindings: ['selected:fancy'],
  
  click() {
    var greeting = this.get('greeting');
    alert( greeting + '! you clicked me!');
    
    this.toggleProperty('selected');
  },
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

.example-component {
  display: block;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
}

.example-component h1 {
  font-size: 20px;
  margin: 0;
  padding: 0;
}

.example-component.fancy {
  background: lightgreen;
  color: white;
}

templates.application.hbs

{{!-- using defaults --}}
{{example-component}}

{{!-- you can also 'pass in' arguments like a JS function --}}
{{example-component greeting="Hola"}}

{{!-- lots of attributes get messy on one line --}}
{{example-component 
	greeting="Hola"
  name='@sheriffderek'
  selected=true
}}

templates.components.example-component.hbs

<h2>{{greeting}}, {{name}}! I'm a component - just like the welcome page</h2>
{{!-- just some simple text... and a dynamic attribute of name --}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}