Ember.Component Class
PUBLIC
Extends: Ember.View
Uses: Ember.ViewTargetActionSupport
Defined in: packages/ember-htmlbars/lib/component.js:21
Module: ember-views
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.
Please login to continue.