Components are the building blocks of dynamic UI fragments or elements in Ember. They render a template, optionally backed by a class extending Ember.Component
.
The easiest way to create a component is to create a template file with a dash-separated name in the app/components/
directory. Then you can embed it in inside other templates by just calling {{<component-name>}}
and passing the required parameters.
Components are independent and completely isolated from the client context; all required data must be passed as parameters. However, if you use {{yield}}
inside the template, it essentially becomes a block (or container) component, where you can add any content; this content can access any controller attribute and model.
A component can be generated by the following command:
ember generate component <component-name> --pod
This command generates two files, component.js
and template.hbs
, under the app/<pod-dir>/components/<component...