Regular updates

[twpd/master.git] / ember.md

diff --git a/ember.md b/ember.md
index e436777..f8d077f 100644 (file)
--- a/ember.md
+++ b/ember.md
@@ -7,68 +7,65 @@ category: JavaScript libraries
 
 ### Routes
 
-    App.Router.map(function() {
-      this.resource('trips', function() {
-          this.route('item', { path: '/:trip_id' });
+    Router.map(function() {
+      this.route('trips', function() {
+          this.route('item', { path: '/:tripId' });
       });
 
       this.route('upcoming');
-      this.route('about', { path: '/about' });
+      this.route('about', { path: '/aboutus' });
       this.route('schedules');
       this.route('history');
-      this.route('post');
+      this.route('post', { path: '/post/:postId' });
     });
 
 ### A route
 
-    App.IndexRoute = Ember.Route.extend({
-      setupController: function(controller) {
-        controller.set('title', 'my app');
-        // <h1>{{title}}</h1>
-      },
-
-      setupController: function(controller, model) {
-        controller.set("model", model);
-        this.controllerFor('topPost').set('model', model);
-      },
-
-      model: function(params) {
-        return this.store.find('posts');
-        return this.store.find('post', params.post_id);
-      },
-      
-      serialize: function(model) {
-        // this will make the URL `/posts/foo-post`
-        return { post_slug: model.get('slug') };
+    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);
       }
-    });
-
-### View
-
-    App.InfoView = Ember.View.extend({
-      templateName: 'input',  /* optional */
-
-      fooName: "Hello"  /* {{ view.fooName }} */
-
-      click: function(e) {
-        "I was clicked";
+    }
+
+### 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;
+      }
+    }
 
-    });
-
-### markup
-
-    <img {{bindAttr src="avatarURL"}}>
-    <button {{action follow}}>
+### Template
 
-Value binding:
+    <div ...attributes>
+        <label for="title">Title</label>
+        <input
+            id="title"
+            value={{@post.title}}
+            {{on 'input' this.updateTitle}}
+        />
 
-    {{view Ember.TextField class="input block" valuebinding="emailAddresses"}}
+        <p>
+            {{this.fullTitle}}
+        </p>
+    </div>
 
-Actions:
+Invoking the component:
 
-    <button {{action invite emailAddresses}}>Invite></button>
+    <PostEditor class='my-post' @post={{@model}} />
 
-    <a href="#" {{action set "isEditingContacts" true target="view"}} 
 
 {% endraw %}