Ember.js Framework Architecture Cheat Sheet

Ember.js is a productive, battle-tested JavaScript framework for building ambitious web applications.

Router Mapping (router.js)

import EmberRouter from '@ember/routing/router';

Router.map(function () {
  this.route('trips', function () {
    this.route('item', { path: '/:tripId' });
  });

  this.route('about', { path: '/about-us' });
  this.route('post', { path: '/posts/:postId' });
});

---

Route Model Hooks (routes/post.js)

import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class PostRoute extends Route {
  @service store;

  model({ postId }) {
    // Model is passed to the component template as @model
    return this.store.findRecord('post', postId);
  }
}

---

Glimmer Components (components/post-editor.js)

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class PostEditorComponent extends Component {
  @tracked title = '';

  get fullTitle() {
    return `Draft: ${this.title}`;
  }

  @action
  updateTitle(event) {
    this.title = event.target.value;
  }
}

---

Handlebars Template (components/post-editor.hbs)

<div class="post-editor" ...attributes>
  <label for="title-input">Title</label>
  <input
    id="title-input"
    value={{this.title}}
    {{on "input" this.updateTitle}}
  />

  <p class="preview">
    {{this.fullTitle}}
  </p>
</div>

Invoking the Component

<PostEditor class="active-editor" @post={{@model}} />