An addon to support the provider pattern in Ember.js via components, enabling properties to be passed to components without having to pass properties down the whole component tree.
MIT License
An addon to support the provider pattern in Ember.js via components, enabling properties to be passed to components without having to pass properties down the whole component tree.
Demo: https://ember-twiddle.com/22af9684d040d4c130080ef5c6e3e30f
ember install ember-provider-consumer
Create two components, a provider and consumer. The provider component will contain the properties that the consumer component will access.
Here we will use my-provider
and my-consumer
as an example of the two components.
ember generate component my-provider
ember generate component my-consumer
Import the Consumer
component from ember-provider-consume
and the generated provider component into the generated consumer component.
Subclass the Consumer
component and set the provider component as the providerComponent
property. The providerComponent
property will be used to locate the provider component up the component tree.
Note Consumer
has a layout
property, aka template, so my-consumer
does not have the layout
property defined. my-consumer
component's corresponding template can be removed.
// app/components/my-consumer.js
import ConsumerComponent from 'ember-provider-consumer';
import MyProviderComponent from './my-provider';
export default Consumer.extend({
providerComponent: InputProviderComponent
});
Use the components! Any property set on the provider will be availalbe to the consumer, yielded as provider
. The provider component must be a parent to the consumer component, but the consumer does not have to be a direct descendent.
{{! example application.hbs }}
{{textarea value=userInput}}
{{#my-provider textInput=userInput}}
{{outlet}}
{{/my-provider}}
{{! example index.hbs - rendered inside `application.hbs` outlet, assuming an index route was created }}
{{#my-consumer as | provider |}}
<p>
{{provider.textInput}}
</p>
{{/my-consumer}}
git clone https://github.com/GCheung55/ember-provider-consumer.git
cd ember-provider-consumer
yarn install
yarn lint:hbs
yarn lint:js
yarn lint:js --fix
ember test
Runs the test suite on the current Ember versionember test --server
Runs the test suite in "watch mode"ember try:each
Runs the test suite against multiple Ember versionsember serve
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.