Skip to content

Commit 8f64e06

Browse files
authored
Merge pull request ember-fastboot#912 from SergeAstapov/patch-1
Update readme examples to use native class syntax
2 parents 76108fd + 832b5a0 commit 8f64e06

File tree

1 file changed

+58
-42
lines changed

1 file changed

+58
-42
lines changed

README.md

Lines changed: 58 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -174,24 +174,24 @@ rendering the entire page. Note how the call should be wrapped in a `fastboot.is
174174
check since the method will throw an exception outside of that context:
175175

176176
```js
177-
import Ember from 'ember';
177+
import Component from '@glimmer/component';
178178

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;
182182

183-
init() {
184-
this._super(...arguments);
183+
constructor(owner, args) {
184+
super(owner, args);
185185

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;
188188
});
189189

190-
if (this.get('fastboot.isFastBoot')) {
191-
this.get('fastboot').deferRendering(promise);
190+
if (this.fastboot.isFastBoot) {
191+
this.fastboot.deferRendering(promise);
192192
}
193193
}
194-
});
194+
}
195195
```
196196

197197
### Cookies
@@ -200,14 +200,16 @@ You can access cookies for the current request via `fastboot.request`
200200
in the `fastboot` service.
201201

202202
```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;
205207

206208
model() {
207-
let authToken = this.get('fastboot.request.cookies.auth');
209+
let authToken = this.fastboot.request.cookies.auth;
208210
// ...
209211
}
210-
});
212+
}
211213
```
212214

213215
The service's `cookies` property is an object containing the request's
@@ -225,15 +227,17 @@ functions available are
225227
[`getAll`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/getAll).
226228

227229
```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;
230234

231235
model() {
232-
let headers = this.get('fastboot.request.headers');
236+
let headers = this.fastboot.request.headers;
233237
let xRequestHeader = headers.get('X-Request');
234238
// ...
235239
}
236-
});
240+
}
237241
```
238242

239243
### Host
@@ -243,14 +247,16 @@ is responding to via `fastboot.request` in the `fastboot` service. The
243247
`host` property will return the host (`example.com` or `localhost:3000`).
244248

245249
```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;
248254

249255
model() {
250-
let host = this.get('fastboot.request.host');
256+
let host = this.fastboot.request.host;
251257
// ...
252258
}
253-
});
259+
}
254260
```
255261

256262
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`
295301
in the `fastboot` service.
296302

297303
```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;
300308

301309
model() {
302-
let authToken = this.get('fastboot.request.queryParams.auth');
310+
let authToken = this.fastboot.request.queryParams.auth;
303311
// ...
304312
}
305-
});
313+
}
306314
```
307315

308316
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
315323
`fastboot` service.
316324

317325
```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;
320330

321331
model() {
322-
let path = this.get('fastboot.request.path');
332+
let path = this.fastboot.request.path;
323333
// ...
324334
}
325-
});
335+
}
326336
```
327337

328338
### Protocol
@@ -332,14 +342,16 @@ current FastBoot server is responding to via `fastboot.request` in the
332342
`fastboot` service.
333343

334344
```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;
337349

338350
model() {
339-
let protocol = this.get('fastboot.request.protocol');
351+
let protocol = this.fastboot.request.protocol;
340352
// ...
341353
}
342-
});
354+
}
343355
```
344356

345357
### The Shoebox
@@ -379,14 +391,16 @@ application, it will grab the `shoeboxStore` from the shoebox and retrieve
379391
the record necessary for rendering this route.
380392

381393
```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;
384398

385399
model(params) {
386-
let shoebox = this.get('fastboot.shoebox');
400+
let shoebox = this.fastboot.shoebox;
387401
let shoeboxStore = shoebox.retrieve('my-store');
388402

389-
if (this.get('fastboot.isFastBoot')) {
403+
if (this.fastboot.isFastBoot) {
390404
return this.store.findRecord('post', params.post_id).then(post => {
391405
if (!shoeboxStore) {
392406
shoeboxStore = {};
@@ -398,7 +412,7 @@ export default Ember.Route.extend({
398412
return shoeboxStore && shoeboxStore[params.post_id];
399413
}
400414
}
401-
});
415+
}
402416
```
403417

404418
### Think out of the Shoebox
@@ -460,13 +474,15 @@ After installing the addon and applying the mixin, your routes can look like thi
460474
```javascript
461475
import Route from '@ember/routing/route';
462476

463-
export default Route.extend({
477+
export default class MyRoute extends Route {
478+
@service fastboot;
479+
464480
model() {
465481
// first call in a server makes actual ajax request.
466482
// second call in a browser serves cached response
467483
return this.store.findAll('posts')
468484
}
469-
})
485+
}
470486
```
471487
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).
472488

0 commit comments

Comments
 (0)