ember.md

   1 ---
   2 title: Ember.js
   3 category: JavaScript libraries
   4 layout: 2017/sheet
   5 tags: [Archived]
   6 archived: This sheet describes an older version of Ember.
   7 ---
   8
   9 {% raw %}
  10
  11 ### Routes
  12
  13     Router.map(function() {
  14       this.route('trips', function() {
  15           this.route('item', { path: '/:tripId' });
  16       });
  17
  18       this.route('upcoming');
  19       this.route('about', { path: '/aboutus' });
  20       this.route('schedules');
  21       this.route('history');
  22       this.route('post', { path: '/post/:postId' });
  23     });
  24
  25 ### A route
  26
  27     import Route from '@ember/routing/route';
  28
  29     export default PostRoute extends Route {
  30       model({ postId }) {
  31         // Post will be accessible as `this.model` in the controller
  32         // or `{{@model}}` in the template.
  33         return this.store.find('post', postId);
  34       }
  35     }
  36
  37 ### Component
  38
  39     import Component from '@glimmer/component';
  40     import { tracked } from '@glimmer/tracking';
  41
  42     export default PostEditor extends Component {
  43       @tracked title;
  44
  45       get fullTitle() {
  46         return `Post: ${title}`;
  47       }
  48
  49       titleUpdate(event) {
  50         this.title = event.target.value;
  51       }
  52     }
  53
  54 ### Template
  55
  56     <div ...attributes>
  57         <label for="title">Title</label>
  58         <input
  59             id="title"
  60             value={{@post.title}}
  61             {{on 'input' this.updateTitle}}
  62         />
  63
  64         <p>
  65             {{this.fullTitle}}
  66         </p>
  67     </div>
  68
  69 Invoking the component:
  70
  71     <PostEditor class='my-post' @post={{@model}} />
  72
  73
  74 {% endraw %}