Skip to content

Commit 3e8f335

Browse files
locksKelly Selden
locks
authored and
Kelly Selden
committed
Clean up user guide
- Update imports for RFC 176 - Remove unnecessary `.get`s - Miscelaneous cleanups like `memberFunction: function() {` to `memberFuntion() {`
1 parent f5e4663 commit 3e8f335

File tree

2 files changed

+95
-53
lines changed

2 files changed

+95
-53
lines changed

‎markdown/docs/user-guide.md‎

Lines changed: 93 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,13 @@ For more information, see the [Architecture](#architecture) section.
8686
FastBoot registers the `fastboot` [service](https://guides.emberjs.com/v2.7.0/applications/services/) which you can inject into your application:
8787

8888
```javascript
89-
export default Ember.Route.extend({
90-
fastboot: Ember.inject.service(),
91-
isFastBoot: Ember.computed.reads('fastboot.isFastBoot'),
89+
import Route from '@ember/routing/route';
90+
import { inject as service } from '@ember/service';
91+
import { reads } from '@ember/object/computed';
92+
93+
export default Route.extend({
94+
fastboot: service(),
95+
isFastBoot: reads('fastboot.isFastBoot'),
9296

9397
// ... Application code
9498
});
@@ -127,8 +131,11 @@ The `headers` object implements part of the [Fetch API's Headers class](https://
127131
For more information about HTTP headers see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).
128132

129133
```javascript
130-
export default Ember.Route.extend({
131-
fastboot: Ember.inject.service(),
134+
import Route from '@ember/routing/route';
135+
import { inject as service } from '@ember/service';
136+
137+
export default Route.extend({
138+
fastboot: service(),
132139

133140
model() {
134141
let headers = this.get('fastboot.request.headers');
@@ -143,8 +150,11 @@ export default Ember.Route.extend({
143150
You can access cookies for the current request via `fastboot.request` in the `fastboot` service.
144151

145152
```javascript
146-
export default Ember.Route.extend({
147-
fastboot: Ember.inject.service(),
153+
import Route from '@ember/routing/route';
154+
import { inject as service } from '@ember/service';
155+
156+
export default Route.extend({
157+
fastboot: service(),
148158

149159
model() {
150160
let authToken = this.get('fastboot.request.cookies.auth');
@@ -162,11 +172,14 @@ The `host` property will return the full `hostname` and `port` (`example.com` or
162172
For example, when requesting `http://myapp.example.com/photos` from your browser, `fastboot.request.host` would equal `myapp.example.com`
163173

164174
```javascript
165-
export default Ember.Route.extend({
166-
fastboot: Ember.inject.service(),
175+
import Route from '@ember/routing/route';
176+
import { inject as service } from '@ember/service';
177+
178+
export default Route.extend({
179+
fastboot: service(),
167180

168181
model() {
169-
let host = this.get('fastboot.request.host');
182+
let host = this.fastboot.request.host;
170183
// ...
171184
}
172185
});
@@ -215,11 +228,14 @@ An improperly constructed `RegExp` could open your FastBoot servers and any back
215228
You can access query parameters for the current request via `fastboot.request` in the `fastboot` service.
216229

217230
```javascript
218-
export default Ember.Route.extend({
219-
fastboot: Ember.inject.service(),
231+
import Route from '@ember/routing/route';
232+
import { inject as service } from '@ember/service';
233+
234+
export default Route.extend({
235+
fastboot: service(),
220236

221237
model() {
222-
let authToken = this.get('fastboot.request.queryParams.auth');
238+
let authToken = this.fastboot.request.queryParams.auth;
223239
// ...
224240
}
225241
});
@@ -232,11 +248,14 @@ The service's `queryParams` property is an object containing the request's query
232248
You can access the path (`/` or `/some-path`) of the request that the current FastBoot server is responding to via `fastboot.request` in the `fastboot` service.
233249

234250
```javascript
235-
export default Ember.Route.extend({
236-
fastboot: Ember.inject.service(),
251+
import Route from '@ember/routing/route';
252+
import { inject as service } from '@ember/service';
253+
254+
export default Route.extend({
255+
fastboot: service(),
237256

238257
model() {
239-
let path = this.get('fastboot.request.path');
258+
let path = this.fastboot.request.path;
240259
// ...
241260
}
242261
});
@@ -247,11 +266,14 @@ export default Ember.Route.extend({
247266
You can access the protocol (`http:` or `https:`) of the request that the current FastBoot server is responding to via `fastboot.request` in the `fastboot` service.
248267

249268
```javascript
250-
export default Ember.Route.extend({
251-
fastboot: Ember.inject.service(),
269+
import Route from '@ember/routing/route';
270+
import { inject as service } from '@ember/service';
271+
272+
export default Route.extend({
273+
fastboot: service(),
252274

253275
model() {
254-
let protocol = this.get('fastboot.request.protocol');
276+
let protocol = this.fastboot.request.protocol;
255277
// ...
256278
}
257279
});
@@ -263,11 +285,14 @@ You can also access the method of the request via `fastboot.request` in the `fas
263285
The `method` property will return the method name (`GET`, `POST`, `PATCH`...) of the request.
264286

265287
```javascript
266-
export default Ember.Route.extend({
267-
fastboot: Ember.inject.service(),
288+
import Route from '@ember/routing/route';
289+
import { inject as service } from '@ember/service';
290+
291+
export default Route.extend({
292+
fastboot: service(),
268293

269294
model() {
270-
let method = this.get('fastboot.request.method');
295+
let method = this.fastboot.request.method;
271296
// ...
272297
}
273298
});
@@ -341,11 +366,14 @@ Depending on what method on `body-parser` you used, the body can be a parse JSON
341366
or even a raw Buffer.
342367

343368
```javascript
344-
export default Ember.Route.extend({
345-
fastboot: Ember.inject.service(),
369+
import Route from '@ember/routing/route';
370+
import { inject as service } from '@ember/service';
371+
372+
export default Route.extend({
373+
fastboot: service(),
346374

347375
model() {
348-
let method = this.get('fastboot.request.body');
376+
let method = this.fastboot.request.body;
349377
// ...
350378
}
351379
});
@@ -361,14 +389,17 @@ You can access the current response headers via `fastboot.response.headers`.
361389
The `headers` object implements part of the [Fetch API's Headers class](https://developer.mozilla.org/en-US/docs/Web/API/Headers), the functions available are [`has`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/has), [`get`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/get), and [`getAll`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/getAll).
362390

363391
```javascript
364-
export default Ember.Route.extend({
365-
fastboot: Ember.inject.service(),
392+
import Route from '@ember/routing/route';
393+
import { inject as service } from '@ember/service';
394+
395+
export default Route.extend({
396+
fastboot: service(),
366397

367398
model() {
368-
let isFastBoot = this.get('fastboot.isFastBoot');
399+
let isFastBoot = this.fastboot.isFastBoot;
369400

370401
if (isFastBoot) {
371-
let resHeaders = this.get('fastboot.response.headers');
402+
let resHeaders = this.fastboot.response.headers;
372403
resHeaders.set('X-Debug-Response-Type', 'fastboot');
373404
}
374405
// ...
@@ -383,18 +414,21 @@ This is useful if you want your application to return a non-default (`200`) stat
383414
For example if you want a route of your application to be `401 - Unauthorized` if it accessed without OAuth credentials, you could use `statusCode` to do that.
384415

385416
```javascript
386-
export default Ember.Route.extend({
387-
fastboot: Ember.inject.service(),
417+
import Route from '@ember/routing/route';
418+
import { inject as service } from '@ember/service';
419+
420+
export default Route.extend({
421+
fastboot: service(),
388422

389423
beforeModel() {
390-
let isFastBoot = this.get('fastboot.isFastBoot');
424+
let isFastBoot = this.fastboot.isFastBoot;
391425

392426
if (!isFastBoot) {
393427
return;
394428
}
395429

396-
let reqHeaders = this.get('fastboot.request.headers');
397-
let authHeaders = reqHeaders.get('Authorization');
430+
let reqHeaders = this.fastboot.request.headers;
431+
let authHeaders = reqHeaders.Authorization;
398432

399433
if (authHeaders === null) {
400434
this.set('fastboot.response.statusCode', 401);
@@ -467,13 +501,16 @@ In the example below, we find and store our data in a `shoeboxStore` object, whe
467501
When the same code is then executed by the client browser, we retrieve the items from the `shoeboxStore` rather than redoing the find (and triggering a network request).
468502

469503
```javascript
470-
export default Ember.Route.extend({
471-
fastboot: Ember.inject.service(),
504+
import Route from '@ember/routing/route';
505+
import { inject as service } from '@ember/service';
506+
507+
export default Route.extend({
508+
fastboot: service(),
472509

473510
model(params) {
474-
let shoebox = this.get('fastboot.shoebox');
511+
let shoebox = fastboot.shoebox;
475512
let shoeboxStore = shoebox.retrieve('my-store');
476-
let isFastBoot = this.get('fastboot.isFastBoot');
513+
let isFastBoot = fastboot.isFastBoot;
477514

478515
if (isFastBoot) {
479516
return this.store.findRecord('post', params.post_id).then(post => {
@@ -515,7 +552,7 @@ The `fetch()` method returns a promise and is very similar to jQuery's `getJSON(
515552
For example, here's an Ember route that uses `fetch()` to access the GitHub JSON API and use it as the route's model:
516553

517554
```javascript
518-
import Route from 'ember-route';
555+
import Route from '@ember/routing/route';
519556
import fetch from 'ember-fetch/ajax';
520557

521558
export default Route.extend({
@@ -542,9 +579,12 @@ This addon allows you to specify the page title by adding a `title` property to
542579

543580
```javascript
544581
// routes/post.js
545-
export default Ember.Route.extend({
546-
titleToken: function(model) {
547-
return model.get('name');
582+
import Route from '@ember/routing/route';
583+
import { inject as service } from '@ember/service';
584+
585+
export default Route.extend({
586+
titleToken(model) {
587+
return model.name;
548588
}
549589
});
550590
```
@@ -576,16 +616,17 @@ This creates a `<meta>` tag whose `property` attribute is `og:title`.
576616
Now we just need to tell it what the title is, which is typically determined dynamically by the current route's model:
577617

578618
```javascript
579-
import Ember from 'ember';
619+
import Route from '@ember/routing/route';
620+
import { inject as service } from '@ember/service';
580621

581-
export default Ember.Route.extend({
622+
export default Route.extend({
582623
// This service is the `model` in the head.hbs template,
583624
// so any properties you set on it are accessible via
584625
// `model.whatever`.
585-
headData: Ember.inject.service(),
626+
headData: service(),
586627

587628
afterModel(model) {
588-
let title = model.get('title') || "Untitled";
629+
let title = model.title || "Untitled";
589630
this.set('headData.title', title);
590631
}
591632
});
@@ -682,19 +723,20 @@ Here's what the `Route` for that page might look like:
682723

683724
```javascript
684725
// app/routes/article.js
685-
import Route from 'ember-route';
726+
import Route from '@ember/routing/route';
727+
import { inject as service } from '@ember/service';
686728

687729
export default Route.extend({
688-
fastboot: Ember.service.inject(),
689-
weather: Ember.service.inject(),
730+
fastboot: service(),
731+
weather: service(),
690732

691733
model({ article_id }) {
692734
return this.store.find('article', article_id);
693735
},
694736

695737
afterModel() {
696-
if (this.get('fastboot.isFastBoot')) {
697-
return this.get('weather').fetch();
738+
if (this.fastboot.isFastBoot) {
739+
return this.weather.fetch();
698740
}
699741
}
700742
});

‎markdown/quickstart.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ We'll use the `fetch` polyfill exposed by the `ember-fetch` addon that lets us w
5151
Implement the model hook like I did below. You might want to change the username in the URL from mine to yours.
5252

5353
```javascript
54-
import Ember from 'ember';
54+
import Route from '@ember/routing/route';
5555
import fetch from 'ember-fetch/ajax';
5656

57-
export default Ember.Route.extend({
57+
export default Route.extend({
5858
model() {
5959
return fetch('https://api.github.com/users/tomdale')
6060
.then(function(response) {

0 commit comments

Comments
 (0)