ember.md

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