/ Components

Dynamic component rendering

Since Ember 1.11.0 we have a new {{component}} helper at hand that lets us dynamically render a component based on some computed property.

Where before you had to have complex handlebar logic to decide which component to render, you can now simply use a computed property:

export default DS.Model.extend({
  displayComponent: Ember.computed('type', function() {
    return this.get('type').lowercase() + "-event";

and the component helper to render the component with the name returned by the computed property.

{{component event.displayComponent model=event}}
Dynamic component rendering
Share this