@@ -174,24 +174,24 @@ rendering the entire page. Note how the call should be wrapped in a `fastboot.is
174
174
check since the method will throw an exception outside of that context:
175
175
176
176
``` js
177
- import Ember from ' ember ' ;
177
+ import Component from ' @glimmer/component ' ;
178
178
179
- export default Ember . Component . extend ( {
180
- fastboot : Ember . inject . service (),
181
- model : Ember . inject . service (),
179
+ export default class MyComponent extends Component {
180
+ @ service fastboot;
181
+ @ service model;
182
182
183
- init ( ) {
184
- this . _super ( ... arguments );
183
+ constructor ( owner , args ) {
184
+ super (owner, args );
185
185
186
- let promise = this .get ( ' store' ) .findAll (' post' ).then ((posts ) => {
187
- this .set ( ' posts' , posts) ;
186
+ let promise = this .store .findAll (' post' ).then ((posts ) => {
187
+ this .posts = posts;
188
188
});
189
189
190
- if (this .get ( ' fastboot.isFastBoot' ) ) {
191
- this .get ( ' fastboot' ) .deferRendering (promise);
190
+ if (this .fastboot .isFastBoot ) {
191
+ this .fastboot .deferRendering (promise);
192
192
}
193
193
}
194
- });
194
+ }
195
195
```
196
196
197
197
### Cookies
@@ -200,14 +200,16 @@ You can access cookies for the current request via `fastboot.request`
200
200
in the ` fastboot ` service.
201
201
202
202
``` js
203
- export default Ember .Route .extend ({
204
- fastboot: Ember .inject .service (),
203
+ import Route from ' @ember/routing/route' ;
204
+
205
+ export default class MyRoute extends Route {
206
+ @service fastboot;
205
207
206
208
model () {
207
- let authToken = this .get ( ' fastboot.request.cookies.auth' ) ;
209
+ let authToken = this .fastboot .request .cookies .auth ;
208
210
// ...
209
211
}
210
- });
212
+ }
211
213
```
212
214
213
215
The service's ` cookies ` property is an object containing the request's
@@ -225,15 +227,17 @@ functions available are
225
227
[ ` getAll ` ] ( https://developer.mozilla.org/en-US/docs/Web/API/Headers/getAll ) .
226
228
227
229
``` js
228
- export default Ember .Route .extend ({
229
- fastboot: Ember .inject .service (),
230
+ import Route from ' @ember/routing/route' ;
231
+
232
+ export default class MyRoute extends Route {
233
+ @service fastboot;
230
234
231
235
model () {
232
- let headers = this .get ( ' fastboot.request.headers' ) ;
236
+ let headers = this .fastboot .request .headers ;
233
237
let xRequestHeader = headers .get (' X-Request' );
234
238
// ...
235
239
}
236
- });
240
+ }
237
241
```
238
242
239
243
### Host
@@ -243,14 +247,16 @@ is responding to via `fastboot.request` in the `fastboot` service. The
243
247
` host ` property will return the host (` example.com ` or ` localhost:3000 ` ).
244
248
245
249
``` js
246
- export default Ember .Route .extend ({
247
- fastboot: Ember .inject .service (),
250
+ import Route from ' @ember/routing/route' ;
251
+
252
+ export default class MyRoute extends Route {
253
+ @service fastboot;
248
254
249
255
model () {
250
- let host = this .get ( ' fastboot.request.host' ) ;
256
+ let host = this .fastboot .request .host ;
251
257
// ...
252
258
}
253
- });
259
+ }
254
260
```
255
261
256
262
To retrieve the host of the current request, you must specify a list of
@@ -295,14 +301,16 @@ You can access query parameters for the current request via `fastboot.request`
295
301
in the ` fastboot ` service.
296
302
297
303
``` js
298
- export default Ember .Route .extend ({
299
- fastboot: Ember .inject .service (),
304
+ import Route from ' @ember/routing/route' ;
305
+
306
+ export default class MyRoute extends Route {
307
+ @service fastboot;
300
308
301
309
model () {
302
- let authToken = this .get ( ' fastboot.request.queryParams.auth' ) ;
310
+ let authToken = this .fastboot .request .queryParams .auth ;
303
311
// ...
304
312
}
305
- });
313
+ }
306
314
```
307
315
308
316
The service's ` queryParams ` property is an object containing the request's
@@ -315,14 +323,16 @@ current FastBoot server is responding to via `fastboot.request` in the
315
323
` fastboot ` service.
316
324
317
325
``` js
318
- export default Ember .Route .extend ({
319
- fastboot: Ember .inject .service (),
326
+ import Route from ' @ember/routing/route' ;
327
+
328
+ export default class MyRoute extends Route {
329
+ @service fastboot;
320
330
321
331
model () {
322
- let path = this .get ( ' fastboot.request.path' ) ;
332
+ let path = this .fastboot .request .path ;
323
333
// ...
324
334
}
325
- });
335
+ }
326
336
```
327
337
328
338
### Protocol
@@ -332,14 +342,16 @@ current FastBoot server is responding to via `fastboot.request` in the
332
342
` fastboot ` service.
333
343
334
344
``` js
335
- export default Ember .Route .extend ({
336
- fastboot: Ember .inject .service (),
345
+ import Route from ' @ember/routing/route' ;
346
+
347
+ export default class MyRoute extends Route {
348
+ @service fastboot;
337
349
338
350
model () {
339
- let protocol = this .get ( ' fastboot.request.protocol' ) ;
351
+ let protocol = this .fastboot .request .protocol ;
340
352
// ...
341
353
}
342
- });
354
+ }
343
355
```
344
356
345
357
### The Shoebox
@@ -379,14 +391,16 @@ application, it will grab the `shoeboxStore` from the shoebox and retrieve
379
391
the record necessary for rendering this route.
380
392
381
393
``` js
382
- export default Ember .Route .extend ({
383
- fastboot: Ember .inject .service (),
394
+ import Route from ' @ember/routing/route' ;
395
+
396
+ export default class MyRoute extends Route {
397
+ @service fastboot;
384
398
385
399
model (params ) {
386
- let shoebox = this .get ( ' fastboot.shoebox' ) ;
400
+ let shoebox = this .fastboot .shoebox ;
387
401
let shoeboxStore = shoebox .retrieve (' my-store' );
388
402
389
- if (this .get ( ' fastboot.isFastBoot' ) ) {
403
+ if (this .fastboot .isFastBoot ) {
390
404
return this .store .findRecord (' post' , params .post_id ).then (post => {
391
405
if (! shoeboxStore) {
392
406
shoeboxStore = {};
@@ -398,7 +412,7 @@ export default Ember.Route.extend({
398
412
return shoeboxStore && shoeboxStore[params .post_id ];
399
413
}
400
414
}
401
- });
415
+ }
402
416
```
403
417
404
418
### Think out of the Shoebox
@@ -460,13 +474,15 @@ After installing the addon and applying the mixin, your routes can look like thi
460
474
` ` ` javascript
461
475
import Route from ' @ember/routing/route' ;
462
476
463
- export default Route .extend ({
477
+ export default class MyRoute extends Route {
478
+ @service fastboot;
479
+
464
480
model () {
465
481
// first call in a server makes actual ajax request.
466
482
// second call in a browser serves cached response
467
483
return this .store .findAll (' posts' )
468
484
}
469
- })
485
+ }
470
486
` ` `
471
487
And they still take advantage of caching in the ` shoebox` . No more redundant AJAX for already acquired data. Installation details are available in the addon [documentation](https://embermap.github.io/ember-data-storefront/docs).
472
488
0 commit comments