diff --git a/ember.md b/ember.md index e43677786..f8d077fbc 100644 --- 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'); - //

{{title}}

- }, + 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); + } + } - 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); - }, +### Component + + import Component from '@glimmer/component'; + import { tracked } from '@glimmer/tracking'; + + export default PostEditor extends Component { + @tracked title; + + get fullTitle() { + return `Post: ${title}`; + } - serialize: function(model) { - // this will make the URL `/posts/foo-post` - return { post_slug: model.get('slug') }; + titleUpdate(event) { + this.title = event.target.value; } - }); + } -### View +### Template - App.InfoView = Ember.View.extend({ - templateName: 'input', /* optional */ +
+ + - fooName: "Hello" /* {{ view.fooName }} */ +

+ {{this.fullTitle}} +

+
- click: function(e) { - "I was clicked"; - } +Invoking the component: - }); + -### markup - - - - -