https://github.com/minutebase/ember-render-stack
Ember addon to render a stack of outlets
https://github.com/minutebase/ember-render-stack
Last synced: about 1 year ago
JSON representation
Ember addon to render a stack of outlets
- Host: GitHub
- URL: https://github.com/minutebase/ember-render-stack
- Owner: minutebase
- License: mit
- Created: 2014-09-05T14:16:24.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2016-12-31T13:27:53.000Z (over 9 years ago)
- Last Synced: 2025-03-25T14:03:47.480Z (about 1 year ago)
- Language: JavaScript
- Size: 145 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-render-stack
Helps render a stack to outlets.
For example, you've got a navigation section in the application template into which you want to render
contextual information.
```handlebars
{{outlet "navigation"}}
{{outlet}}
```
You could achieve this with `Route#render` but will quickly run into the problem that exiting a route
will not re-display content from a parent route.
Eg. `/foo` renders to `navigation` as does `/foo/bar/baz`, but navigating to `/foo/bar` from `/foo/bar/baz`
will end up displaying nothing instead of re-rendering `/foo`'s navigation.
That's what this addon solves.
## Installation
Install as an Ember CLI addon:
```
npm install --save-dev ember-render-stack
```
## Usage
First mixin the `RenderMixin` to your `ApplicationRoute`:
```javascript
import Ember from 'ember';
import { StackRenderMixin } from 'ember-render-stack';
export default Ember.Route.extend(StackRenderMixin);
```
Next add an outlet you want to manage to a layout, eg your `application.hbs`:
```handlebars
{{outlet "navigation"}}
{{outlet}}
```
Finally, mixin the `RouteMixin` to each route you want to render into the stack and call
`renderToStack` for each outlet:
```javascript
import Ember from 'ember';
import { StackRouteMixin } from 'ember-render-stack';
export default Ember.Route.extend(StackRouteMixin, {
renderStack: function() {
this.renderToStack('navigation/some-template', {
into: 'application',
outlet: 'navigation'
});
}
});
```
`renderToStack` takes the same options as the standard [Route#render](http://emberjs.com/api/classes/Ember.Route.html#method_render)
so you can simply replace calls to `render` with `renderToStack`.
## Development
### 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`