Component

An Ember.Component is a view that is completely isolated. Properties accessed in its templates go to the view object and actions are targeted at the view object. There is no access to the surrounding context or outer controller; all contextual information must be passed in.

The easiest way to create an Ember.Component is via a template. If you name a template components/my-foo, you will be able to use {{my-foo}} in other templates, which will make an instance of the isolated component.

{{app-profile person=currentUser}}

<!-- app-profile template -->
<h1>{{person.title}}</h1>
<img src={{person.avatar}}>
<p class='signature'>{{person.signature}}</p>

You can use yield inside a template to include the contents of any block attached to the component. The block will be executed in the context of the surrounding context or outer controller:

{{#app-profile person=currentUser}}
  <p>Admin mode</p>
  {{! Executed in the controller's context. }}
{{/app-profile}}

<!-- app-profile template -->
<h1>{{person.title}}</h1>
{{! Executed in the component's context. }}
{{yield}} {{! block contents }}

If you want to customize the component, in order to handle events or actions, you implement a subclass of Ember.Component named after the name of the component. Note that Component needs to be appended to the name of your subclass like AppProfileComponent.

For example, you could implement the action hello for the app-profile component:

App.AppProfileComponent = Ember.Component.extend({
  actions: {
    hello: function(name) {
      console.log("Hello", name);
    }
  }
});

And then use it in the component's template:

<!-- app-profile template -->

<h1>{{person.title}}</h1>
{{yield}} <!-- block contents -->

<button {{action 'hello' person.name}}>
  Say Hello to {{person.name}}
</button>

Components must have a - in their name to avoid conflicts with built-in controls that wrap HTML elements. This is consistent with the same requirement in web components.