Class Ember.Component
An Ember.Component
is a view that is completely
isolated. Property access 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 is 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.
1 |
{{app-profile person=currentUser}} |
1 2 3 4 |
<!-- app-profile template --> <h1>{{person.title}}</h1> <img {{bind-attr src=person.avatar}}> <p class='signature'>{{person.signature}}</p> |
You can also use yield
inside a template to
include the contents of the custom tag:
1 2 3 |
{{#app-profile person=currentUser}} <p>Admin mode</p> {{/app-profile}} |
1 2 3 |
<!-- app-profile template --> <h1>{{person.title}}</h1> {{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:
1 2 3 4 5 |
App.AppProfileComponent = Ember.Component.extend({ hello: function(name) { console.log("Hello", name); } }); |
And then use it in the component's template:
1 2 3 4 5 6 7 8 |
<!-- 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.
Methods
- $
- addObserver
- append
- appendTo
- beginPropertyChanges
- cacheFor
- create
- createChildView
- createElement
- createWithMixins
- decrementProperty
- destroy
- destroyElement
- eachComputedProperty
- endPropertyChanges
- findElementInParentElement
- get
- getProperties
- getWithDefault
- has
- hasObserverFor
- incrementProperty
- init
- metaForProperty
- notifyPropertyChange
- off
- on
- one
- propertyDidChange
- propertyWillChange
- remove
- removeAllChildren
- removeChild
- removeFromParent
- removeObserver
- render
- reopen
- reopenClass
- replaceIn
- rerender
- sendAction
- set
- setProperties
- toString
- toggleProperty
- trigger
- willDestroy
Properties
- ariaRole
- attributeBindings
- classNameBindings
- classNames
- concatenatedProperties
- context
- controller
- element
- isDestroyed
- isDestroying
- isView
- isVisible
- layout
- layoutName
- nearestChildOf
- nearestOfType
- nearestWithProperty
- parentView
- tagName
- targetObject
- template
- templateName
- templates
- views