Ember.js Framework Architecture Cheat Sheet

Το 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 Model Hooks και Στοιχεία 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>

---

Σχετικά Cheat Sheets

• Handlebars.js
• React