Dynamic options for dynamic components
JavaScript HTML Shell CSS
Clone or download
juwara0 Merge pull request #57 from juwara0/setNode
set node version 8.6.0
Latest commit 5860cbc May 29, 2018
Permalink
Failed to load latest commit information.
.github Replace PullApprove with GitHub Code Owners Mar 16, 2018
.travis Update .travis/ scripts Mar 19, 2018
addon update targetObject to target to fix deprecation notice Apr 24, 2018
config update coverage.js config file and move to correct directory for addons Feb 14, 2018
tests clean up excludes directories Feb 14, 2018
vendor Initial Commit from Ember CLI v2.8.0 Oct 27, 2016
.bowerrc Revert "Merge pull request #31 from juwara0/upgradeEmberCli_2-15-1" Nov 2, 2017
.editorconfig Initial Commit from Ember CLI v2.8.0 Oct 27, 2016
.ember-cli Initial Commit from Ember CLI v2.8.0 Oct 27, 2016
.eslintignore Initial commit Nov 13, 2016
.eslintrc.js Revert "Merge pull request #31 from juwara0/upgradeEmberCli_2-15-1" Nov 2, 2017
.gitignore remove ignoring of package-lock file Mar 9, 2018
.npmignore upgraded to EmberCLI_2-12-3 Jun 30, 2017
.pr-bumper.json update pr-bumper to version 3, node 8 and slack integration Mar 9, 2018
.remarkrc update to use latest pr-bumper Feb 20, 2017
.travis.yml set node version 8.6.0 May 29, 2018
.vscodeignore Initial commit Nov 13, 2016
.watchmanconfig Initial Commit from Ember CLI v2.8.0 Oct 27, 2016
CHANGELOG.md [pr-bumper] Automated version bump to 5.0.1 Apr 25, 2018
LICENSE.md upgraded to EmberCLI_2-12-3 Jun 30, 2017
README.md Fix build Jan 18, 2017
bower.json Revert "Merge pull request #31 from juwara0/upgradeEmberCli_2-15-1" Nov 2, 2017
dependency-snapshot.json Automated version bump [ci skip] Jan 25, 2017
ember-cli-build.js Address dependency management issues (#38) Jan 3, 2018
index.js upgraded to EmberCLI_2-12-3 Jun 30, 2017
jsconfig.json Initial commit Nov 13, 2016
package-lock.json [pr-bumper] Automated version bump to 5.0.1 Apr 25, 2018
package.json [pr-bumper] Automated version bump to 5.0.1 Apr 25, 2018
testem.js Address dependency management issues (#38) Jan 3, 2018

README.md

ember-spread

Dynamic options for dynamic components

Dependencies

Ember NPM

Health

Travis Coveralls

Security

bitHound

Ember Observer score

EmberObserver

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'
  )
}}
  • If you need completely dynamic properties (added to the hash after instantiation) this can be accomplished by providing a source object and property to observe for property additions
{{component-foo
  options=foo
  spreadOptions=(hash
    source=(hash
      object=this
      property='foo'
    )
  )
}}