New Twiddle

components.ice-cream.js

import Ember from 'ember';

export default Ember.Component.extend({
  flavor: 'vanilla',
  price: '2.50'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  useDefaults: true,
  actions: {
  	changeDefault() {
    	this.toggleProperty('useDefaults');
    }
  }
});

templates.application.hbs

<p>We're rendering an "ice cream" component. Notice the values for flavor and price are defaults (boring old vanilla), set on the component's js file. If we provide the values from the template (where we're calling ice-cream), it will override these defaults. Click the button below to see the values overridden.</p>

{{#if useDefaults}}
	{{ice-cream}}
  <button {{action "changeDefault"}}>Override defaults</button>
{{else}}
	{{ice-cream flavor="Rocky road" price="100.00"}}
  <button {{action "changeDefault"}}>Restore defaults</button>
{{/if}}

templates.components.ice-cream.hbs

<h2>Flavor: {{flavor}}</h2>
<h3>Price: {{price}}</h3>

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}