Contextual Components

application.controller.js

import Ember from 'ember';

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

application.template.hbs

{{some-component button=(component 'my-button' label='My Label')}}

<p class="u-quiet"><small>I'm already passing in a component with <code>(component 'my-button')</code>. Why can't I just use <code>{{button}}</code> to invoke it.</small></p>

my-button.template.hbs

<button class="My-Button">{{label}}</button>

some-component.template.hbs

<p>This is an awesome component from somewhere. And I can pass in a custom button.</p>

{{component button}}

styles.app.css

body {
  color: #444;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding: 1rem;
}

.u-quiet {
  color: #999;
}

.My-Button {
  background: #0069FF;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: inherit;
  padding: 0.5rem 2rem;
}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "release",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "release"
  }
}