Ember.js チートシート（Webアプリケーションフレームワーク）

Ember.js は、大規模で野心的な Web アプリケーションを効率的に構築するための、実績あるフルスタック JavaScript フレームワークです。

ルーター定義（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 モデルフックと Glimmer コンポーネント

// Route Model Hook (routes/post.js)
import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class PostRoute extends Route {
  @service store;

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

// Glimmer Component (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;
  }
}

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

---

関連するチートシート

• Handlebars.js
• React