Ember.js 速查表

本文根据 Devhints / Ember.js 翻译。代码示例及版本范围沿用原文。此资料为归档或旧版本参考。

原文归档说明：本页面描述的是 Ember 的旧版本。

路由

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

  this.route('upcoming');
  this.route('about', { path: '/aboutus' });
  this.route('schedules');
  this.route('history');
  this.route('post', { path: '/post/:postId' });
});

路由

import Route from '@ember/routing/route';

export default PostRoute extends Route {
  model({ postId }) {
    // Post will be accessible as `this.model` in the controller
    // or `{{@model}}` in the template.
    return this.store.find('post', postId);
  }
}

组件

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

export default PostEditor extends Component {
  @tracked title;

  get fullTitle() {
    return `Post: ${title}`;
  }

  titleUpdate(event) {
    this.title = event.target.value;
  }
}

模板

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

    <p>
        {{this.fullTitle}}
    </p>
</div>

调用组件：

<PostEditor class='my-post' @post={{@model}} />