https://github.com/wongpeiyi/ember-component-routes

Render components directly from routes in Ember
https://github.com/wongpeiyi/ember-component-routes

Last synced: about 2 months ago
JSON representation

Render components directly from routes in Ember

• Host: GitHub
• URL: https://github.com/wongpeiyi/ember-component-routes
• Owner: wongpeiyi
• License: mit
• Created: 2017-10-31T05:44:18.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-15T10:11:43.000Z (almost 6 years ago)
• Last Synced: 2024-10-04T12:05:48.931Z (3 months ago)
• Language: JavaScript
• Homepage: https://wongpeiyi.github.io/ember-component-routes/
• Size: 505 KB
• Stars: 25
• Watchers: 4
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-ember - ember-component-routes - Render components directly from routes in Ember.js. (Packages / Routing addons)

README

        
# 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](https://github.com/ef4/rfcs/blob/routeable-components/active/0000-routeable-components.md), but rewritten upon its [closure](https://github.com/emberjs/rfcs/pull/38#issuecomment-355800759) to follow the new streamlined direction.

## Demo / Docs

For more info, see the [interactive docs site](https://wongpeiyi.github.io/ember-component-routes/), 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

```js

// 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:

```hbs

{{!-- 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:

```hbs

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

{{@route.model.title}}


Reload

```