Skip to content

Commit fee37d5

Browse files
committed
Merge pull request #1304 from NullVoxPopuli/ember-findRecord-include-how-to
Add docs for Ember.
2 parents ecc3b35 + 11d8fee commit fee37d5

File tree

2 files changed

+93
-0
lines changed

2 files changed

+93
-0
lines changed

docs/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ This is the documentation of AMS, it's focused on the **0.10.x version.**
1515
- [How to add root key](howto/add_root_key.md)
1616
- [How to add pagination links](howto/add_pagination_links.md)
1717
- [Using AMS Outside Of Controllers](howto/outside_controller_use.md)
18+
- [How to use JSON API with Ember](howto/ember-and-json-api.md)
1819

1920
## Getting Help
2021

docs/howto/ember-and-json-api.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# How to use JSON API Query Parameters with Ember
2+
3+
- [Preparation](./ember-and-json-api.md#preparation)
4+
- [Adapter Changes](./ember-and-json-api.md#adapter-changes)
5+
- [Serializer Changes](./ember-and-json-api.md#serializer-changes)
6+
- [Including Nested Resources](./ember-and-json-api.md#including-nested-resources)
7+
8+
## Preparation
9+
10+
Note: This guide assumes that `ember-cli` is used for your ember app.
11+
12+
The JSON API specification calls for hyphens for multi-word separators. AMS uses underscores.
13+
To solve this, in Ember, both the adapter and the serializer will need some modifications:
14+
15+
### Adapter Changes
16+
17+
```javascript
18+
// app/adapters/application.js
19+
import DS from 'ember-data';
20+
import ENV from "../config/environment";
21+
22+
export default DS.JSONAPIAdapter.extend({
23+
namespace: 'api',
24+
// if your rails app is on a different port from your ember app
25+
// this can be helpful for development.
26+
// in production, the host for both rails and ember should be the same.
27+
host: ENV.host,
28+
29+
// allows the multiword paths in urls to be underscored
30+
pathForType: function(type) {
31+
let underscored = Ember.String.underscore(type);
32+
return Ember.String.pluralize(underscored);
33+
},
34+
35+
// allows queries to be sent along with a findRecord
36+
// hopefully Ember / EmberData will soon have this built in
37+
urlForFindRecord(id, modelName, snapshot) {
38+
let url = this._super(...arguments);
39+
let query = Ember.get(snapshot, 'adapterOptions.query');
40+
if(query) {
41+
url += '?' + Ember.$.param(query);
42+
}
43+
return url;
44+
}
45+
});
46+
```
47+
48+
### Serializer Changes
49+
50+
```javascript
51+
// app/serializers/application.js
52+
import Ember from 'ember';
53+
import DS from 'ember-data';
54+
var underscore = Ember.String.underscore;
55+
56+
export default DS.JSONAPISerializer.extend({
57+
keyForAttribute: function(attr) {
58+
return underscore(attr);
59+
},
60+
61+
keyForRelationship: function(rawKey) {
62+
return underscore(rawKey);
63+
}
64+
});
65+
66+
```
67+
68+
## Including Nested Resources
69+
70+
Previously, `store.find` and `store.findRecord` did not allow specification of any query params.
71+
The AMS default for the `include` parameter is to be `nil` meaning that if any associations are defined in your serializer, only the `id` and `type` will be in the `relationships` structure of the JSON API response.
72+
For more on `include` usage, see: [The JSON API include examples](./../general/adapters.md#JSON-API)
73+
74+
With the above modifications, you can execute code as below in order to include nested resources while doing a find query.
75+
76+
```javascript
77+
store.findRecord('post', postId, { adapterOptions: { query: { include: 'comments' } } });
78+
```
79+
will generate the path `/posts/{postId}?include='comments'`
80+
81+
So then in your controller, you'll want to be sure to have something like:
82+
```ruby
83+
render json: @post, include: params[:include]
84+
```
85+
86+
If you want to use `include` on a collection, you'd write something like this:
87+
88+
```javascript
89+
store.query('post', { include: 'comments' });
90+
```
91+
92+
which will generate the path `/posts?include='comments'`

0 commit comments

Comments
 (0)