componentpublic
The {{component}} helper lets you add instances of Ember.Component to a template. See Ember.Component for additional information on how a Component functions. {{component}}'s primary use is for cases where you want to dynamically change which type of component is rendered as the state of your application changes. The provided block will be applied as the template for the component. Given an empty <body> the following template:
{{! application.hbs }}
{{component infographicComponentName}}
And the following application code:
export default Ember.Controller.extend({
infographicComponentName: computed('isMarketOpen', {
get() {
if (this.get('isMarketOpen')) {
return 'live-updating-chart';
} else {
return 'market-close-summary';
}
}
})
});
The live-updating-chart component will be appended when isMarketOpen is true, and the market-close-summary component will be appended when isMarketOpen is false. If the value changes while the app is running, the component will be automatically swapped out accordingly. Note: You should not use this helper when you are consistently rendering the same component. In that case, use standard component syntax, for example:
{{! application.hbs }}
{{live-updating-chart}}
Nested Usage
The component helper can be used to package a component path with initial attrs. The included attrs can then be merged during the final invocation.
For example, given a person-form component with the following template:
{{yield (hash
nameInput=(component "my-input-component" value=model.name placeholder="First Name"))}}
The following snippet:
{{#person-form as |form|}}
{{component form.nameInput placeholder="Username"}}
{{/person-form}}
would output an input whose value is already bound to model.name and placeholder is "Username".
Please login to continue.