EmberJS - Components

Advertisements

Previous Page
Next Page  

The Ember.js components uses the W3C web component specification and provides true encapsulation UI widgets. It contains the three main specification as templates, shadow DOM and custom elements. The component is declared within the data-template-name which has a path name instead of a plain string and are prefixed with "components/".

The following table lists down the action events of actions −

S.No. Action Events & Description
1 Defining a Component

You can easily define a component in Ember.js and each component must have a dash in their name.
2 Component Lifecycle

Component lifecycle uses some of the methods in order to execute the code at specific times in a component's life.
3 Passing Properties to a Component

The component doesn't access the property directly in the template scope. Therefore, just declare the property at the time of component deceleration.
4 Wrapping Content in a Component

You can wrap the content in a component by using the templates.
5 Customizing a Component's Element

You can customize the component's element such as attributes, class names by using a subclass of Ember.Component in the JavaScript.
6 Using Block Params

The passed properties in a component can give back the result in a block expression.
7 Handling Events

The user events such as double-click, hovering, key press etc can be handled by event handlers. To do this, apply the event name as a method on the component.
8 Triggering Changes with Actions

Components can trigger the changes and communicate with events by using the actions.
Advertisements