Dynamic options for dynamic components
ember install ember-spread
A mixin that can be used to spread
a property object
against the top level of a component. Spread allows a component helper to be used without knowing the properties
the target component will require.
E.g.
{{component fooComponent
options=fooOptions
}}
Those options are then flattened onto the target component and observed as normal attributes on the component.
So if fooComponent
was my-button
and fooOptions
was { biz: 'baz' } the above would be the equivalent of:
{{my-button
biz='baz'
}}
Data-driven scenarios will find this particularly useful, since both the component and properties can be retrieved from an external API
ember install ember-spread
http://ciena-blueplanet.github.io/ember-spread/
Component
import SpreadMixin from 'ember-spread'
export default Ember.Component.extend(SpreadMixin, {
...
})
Template instance
{{component-foo
options=bar
}}
- The spread function operates based on the init lifecycle hook, so be sure to call
this._super(...arguments)
if your component also uses that hook - Spread only acts on an object hash (the
hash
helper can be used) options
is the default property that will be spread- If you need to customize the target property you can set the target using the
spreadOptions
property, i.e.
{{component-foo
baz=bar
spreadOptions=(hash
property='baz'
)
}}