You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We'll learn about the purposes of these files and folders as we go. For now, just know that we'll spend most of our time working within the `app` folder.
@@ -195,18 +217,18 @@ Build successful (9761ms)
195
217
196
218
Slowest Nodes (totalTime >= 5%) | Total (avg)
197
219
-+-
198
-
Babel: @embroider/macros (1) |389ms
220
+
Babel: @embroider/macros (1) |417ms
199
221
200
222
201
223
202
-
VITE v7.3.0 ready in3754 ms
224
+
VITE v7.3.1 ready in3542 ms
203
225
204
226
➜ Local: http://localhost:4200/
205
227
```
206
228
207
229
The development server is responsible for compiling our app and serving it to the browsers. It may take a while to boot up. Once it's up and running, open your favorite browser and head to <http://localhost:4200>. You should see the following welcome page:
208
230
209
-
<imgsrc="/images/tutorial/part-1/orientation/welcome@2x.png"alt="Welcome to Ember!"width="1024"height="919">
231
+
<imgsrc="/images/tutorial/part-1/orientation/welcome@2x.png"alt="Welcome to Ember!"width="1024"height="964">
210
232
211
233
<divclass="cta">
212
234
<divclass="cta-note">
@@ -238,7 +260,7 @@ import { WelcomePage } from 'ember-welcome-page';
238
260
{{outlet}}
239
261
240
262
{{! The following component displays Ember's default welcome message. }}
Copy file name to clipboardExpand all lines: guides/release/tutorial/part-2/ember-data.md
+46-37Lines changed: 46 additions & 37 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -74,28 +74,28 @@ Chances are, as we keep working on this app, we will need to add more routes tha
74
74
75
75
Fortunately, we're not going to do any of that. As it turns out, there's a much better solution here: we can use EmberData! As its name implies, [EmberData](../../../models/) is a library that helps manage data and _application state_ in Ember applications.
76
76
77
-
There's a lot to learn about EmberData, but let's start by uncovering features that help with our immediate problem.
78
-
79
77
<divclass="cta">
80
78
<divclass="cta-note">
81
79
<div class="cta-note-body">
82
80
<div class="cta-note-heading">Zoey says...</div>
83
81
<div class="cta-note-message">
84
-
<p>RequestManager is available starting with the EmberData 4.12 LTS release. EmberData works with multiple versions of Ember, please refer to the Compatibility section of the <a href="https://github.com/emberjs/data/blob/main/README.md#compatibility">EmberData README</a> while doing your application upgrade.</p>
82
+
<p>EmberData is in the process of being renamed to WarpDrive. It's not just changing its name though, WarpDrive is now able to be used in multiple different frameworks. You can read more about it in the <a href="https://warp-drive.io">WarpDrive Docs</a></p>
There's a lot to learn about EmberData, but let's start by uncovering features that help with our immediate problem.
90
+
91
91
## EmberData Models
92
92
93
93
EmberData is built around the idea of organizing your app's data into _[model objects](../../../models/defining-models/)_. These objects represent units of information that our application presents to the user. For example, the rental property data we have been working with would be a good candidate.
@@ -119,7 +119,7 @@ export default class RentalModel extends Model {
119
119
}
120
120
```
121
121
122
-
Here, we created a `RentalModel` class that extends EmberData's `Model` superclass. When fetching the listing data from the server, each individual rental property will be represented by an instance (also known as a _[record](../../../models/finding-records/)_) of our `RentalModel` class.
122
+
Here, we created a `RentalModel` class that extends EmberData's `Model` superclass (which is imported from the `@warp-drive/legacy` package). When fetching the listing data from the server, each individual rental property will be represented by an instance (also known as a _[record](../../../models/finding-records/)_) of our `RentalModel` class.
123
123
124
124
We used the `@attr` decorator to declare the attributes of a rental property. These attributes correspond directly to the `attributes` data we expect the server to provide in its responses:
125
125
@@ -226,10 +226,26 @@ module('Unit | Model | rental', function (hooks) {
226
226
227
227
This model test is also known as a _[unit test](../../../testing/testing-models/)_. Unlike any of the other tests that we've written thus far, this test doesn't actually _render_ anything. It just instantiates the rental model object and tests the model object directly, manipulating its attributes and asserting their value.
228
228
229
-
It is worth pointing out that EmberData provides a `store` _[service](../../../services/)_, also known as the EmberData store. In our test, we used the `this.owner.lookup('service:store')` API to get access to the EmberData store. The store provides a `createRecord` method to instantiate our model object for us. To make this `store` service available, we must add the following file:
229
+
It is worth pointing out that EmberData provides a `store` _[service](../../../services/)_, also known as the EmberData store. In our test, we used the `this.owner.lookup('service:store')` API to get access to the EmberData store. The store provides a `createRecord` method to instantiate our model object for us.
230
+
231
+
This is the store that is generated for us as part of the default blueprint:
@@ -308,9 +324,9 @@ Wow... that removed a lot of code! This is all possible thanks to the power of c
308
324
309
325
## The EmberData Store
310
326
311
-
As mentioned above, EmberData provides a `store` service, which we can inject into our route using the `@service store;` declaration, making the EmberData store available as `this.store`. It provides the `request` method for making fetch requests using `RequestManager`. As its name implies: the `RequestManager` is request centric. Instead of answering questions about specific records or types of records, we ask it about the status of a specific request. To initiate a request, we use the `request` method on the store, passing in a request object. The request object is created using builders from `@ember-data/json-api/request`. Specifically, the [`findRecord` builder](../../../models/finding-records/#toc_retrieving-a-single-record) takes a model type (`rental` in our case) and a model ID (for us, that would be `params.rental_id` from the URL) as arguments and builds fetch options for a single record. On the other hand, the [`query` builder](../../../models/finding-records/#toc_retrieving-multiple-records) takes the model type as an argument and builds fetch options to query for all records of that type.
327
+
As mentioned above, EmberData provides a `store` service, which we can inject into our route using the `@service store;` declaration, making the EmberData store available as `this.store`. It provides the `request` method for making fetch requests using `RequestManager`. As its name implies: the `RequestManager` is request centric. Instead of answering questions about specific records or types of records, we ask it about the status of a specific request. To initiate a request, we use the `request` method on the store, passing in a request object. The request object is created using builders from `@warp-drive/utilities/json-api`. Specifically, the [`findRecord` builder](../../../models/finding-records/#toc_retrieving-a-single-record) takes a model type (`rental` in our case) and a model ID (for us, that would be `params.rental_id` from the URL) as arguments and builds fetch options for a single record. On the other hand, the [`query` builder](../../../models/finding-records/#toc_retrieving-multiple-records) takes the model type as an argument and builds fetch options to query for all records of that type.
312
328
313
-
EmberData can do many things, and in default setup it provides caching. EmberData's store caches server responses, allowing instant access to previously fetched data. If the data is already cached, you don't need to wait for the server to respond again. If not, the store fetches it for you.
329
+
EmberData can do many things, and in the default setup it provides caching. EmberData's store caches server responses, allowing instant access to previously fetched data. If the data is already cached, you don't need to wait for the server to respond again. If not, the store fetches it for you.
314
330
315
331
That's a lot of theory, but is this going to work in our app? Let's run the tests and find out!
316
332
@@ -334,7 +350,8 @@ Let's start customizing the things that didn't work for us by default. Specifica
334
350
335
351
The first thing we want to do is have our builder respect a configurable default host and/or namespace. Adding a namespace prefix happens to be pretty common across Ember apps, so EmberData provides a global config mechanism for host and namespace. Typically you will want to do this either in your store file or app file.
As you can see, the handler appends `.json` to the URL of each request. Pretty simple, right? Then it calls the `next` function with the modified copy of the request object (because it is immutable). This is how we can chain multiple handlers together to build up a request.
381
398
382
-
The next step that we need to do, is to configure `RequestManager` to use this handler. Let's create the request-manager service.
399
+
The next step that we need to do, is to configure our `legacyStore` to use this handler. Let's update the store service to add this handler:
Notice that we are using the `JsonSuffixHandler` we created earlier. We also use the `Fetch` handler, which is a built-in handler that makes the actual fetch request. The `use` method is used to add handlers to the request manager. The order in which handlers are added is important, as they will be executed in the order they were added.
399
-
400
-
Lastly, let's update our `store` service to use the new `RequestManager` we created.
0 commit comments