ember-spread

Dynamic options for dynamic components

Dependencies

Health

Security

Ember Observer score

Installation

ember install ember-spread

Details

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

Installation

• ember install ember-spread

Demo

http://ciena-blueplanet.github.io/ember-spread/

Usage

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'
  )
}}