This is Devhints.io cheatsheets — a collection of cheatsheets I've written.

# Ember.js

### Routes

    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' });
    });

### A route

    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);
      }
    }

### Component

    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;
      }
    }

### Template

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

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

Invoking the component:

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

Devhints.io cheatsheets is a collection of cheatsheets I've written over the years. Suggestions and corrections? Send them in. I'm Rico Sta. Cruz. Check out my Today I learned blog for more.