https://github.com/minutebase/ember-dynamic-component
Ember addon to render a dynamic component
https://github.com/minutebase/ember-dynamic-component
Last synced: 11 months ago
JSON representation
Ember addon to render a dynamic component
- Host: GitHub
- URL: https://github.com/minutebase/ember-dynamic-component
- Owner: minutebase
- License: mit
- Created: 2014-10-14T22:51:15.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-02-24T18:13:29.000Z (over 11 years ago)
- Last Synced: 2025-07-22T03:20:35.652Z (11 months ago)
- Language: JavaScript
- Size: 269 KB
- Stars: 40
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Ember-dynamic-component
An Ember CLI addon to render a dynamic component.
## NOTE: Deprecation coming soon
As of [http://github.com/emberjs/ember.js#10093](http://github.com/emberjs/ember.js#10093), there is a corresponding system built into Ember with full support. This change should land in Ember 1.11. At that point this component will be deprecated.
## Using
### Installation
Install this addon via npm:
```
npm install --save-dev ember-dynamic-component
```
### Usage
Give the `{{dynamic-component}}` helper a type with the name of the component to render, and as that property
changes then the correct component will be rendered:
```handlebars
{{dynamic-component type=theType}}
```
Any other properties and actions given to the helper will be passed through to the underlying component:
```handlebars
{{dynamic-component
type=theType
boundProperty=foo
staticProperty="bar"
onFoo="fooTriggered"
}}
```
This means the following:
```handlebars
{{#if showFoo}}
{{x-foo onClick="thingClicked" value=something}}
{{/if}}
{{#if showBar}}
{{x-bar onClick="thingClicked" value=something}}
{{/if}}
{{#if showBaz}}
{{x-baz onClick="thingClicked" value=something}}
{{/if}}
```
... is essentially the same as:
```handlebars
{{dynamic-component type=type onClick="thingClicked" value=something}}
```
## Developing
### Installation
* `git clone` this repository
* `npm install`
* `bower install`
### Running
* `ember server`
* Visit your app at http://localhost:4200.
### Running Tests
* `ember test`
* `ember test --server`
### Building
* `ember build`
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).