Skip to content
Render components directly from routes in Ember
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.template-lintrc.js
.travis.yml
.watchmanconfig
CONTRIBUTING.md
LICENSE.md
README.md
demo-head.html
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-component-routes

This is an experimental Ember CLI addon that enables routes to render components directly, via a {{component-outlet}}, thereby:

  • Eliminating the need for controllers and top-level templates
  • Simplifying query params and route actions behaviour
  • Enabling component animations on render and teardown

... all while preserving classic routing functionality, so you can simply drop it into existing apps without having to rewrite everything first.

This was originally based on the Routable Components RFC, but rewritten upon its closure to follow the new streamlined direction.

Demo / Docs

For more info, see the interactive docs site, which uses ember-component-routes.

Installation & Compatibility

ember install ember-component-routes

This addon is tested against release, beta, canary and the past three LTS releases

Basic Usage

// routes/post.js

import { ComponentRoute } from 'ember-component-routes';

export default ComponentRoute.extend({

  model(params) {
    return this.store.findRecord('post', params.id);
  },

  attributes(model, params, actions) {
    return { model, actions };
  },

  renderComponents() {
    this.renderComponent('post-page');
  },

  actions: {
    reload() {
      this.refresh();
    }
  }
});

Instead of the classic {{outlet}}, use:

{{!-- templates/application.hbs --}}

{{component-outlet}}

When the route is entered, the post-page component will be rendered into the application template's component-outlet, with the result of the attributes hook available as @route on the component:

{{!-- templates/components/post-page.hbs --}}

<h1>{{@route.model.title}}</h1>

<button onclick={{@route.actions.reload}}>Reload</button>
You can’t perform that action at this time.