Ember.js 치트시트 (웹 애플리케이션 프레임워크 아키텍처)

Ember.js는 대규모의 생산적인 모던 웹 애플리케이션을 구축하기 위한 검증된 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