• Stars
    star
    102
  • Rank 335,584 (Top 7 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Adapters and Serializers for Rails's ActiveModel::Serializers

Ember Data ActiveModel Adapter Build Status

Installation

ember install active-model-adapter

  • Ember.js v3.24 or above
  • Ember CLI v3.24 or above
  • Node.js v12 or above

You should make an ApplicationAdapter if you don't already have one:

// app/adapters/application.js
import ActiveModelAdapter from 'active-model-adapter';

export default class ApplicationAdapter extends ActiveModelAdapter {}

If you need to subclass the ActiveModelSerializer, you can import it into your serializer:

// app/serializers/post.js

import { ActiveModelSerializer } from 'active-model-adapter';

export default class PostSerializer extends ActiveModelSerializer {}

Description

The ActiveModelAdapter is a subclass of the RESTAdapter designed to integrate with a JSON API that uses an underscored naming convention instead of camelCasing.

It has been designed to work out of the box with the active_model_serializers Ruby gem. This Adapter expects specific settings using ActiveModel::Serializers, embed :ids, embed_in_root: true which sideloads the records.

JSON Structure

The ActiveModelAdapter expects the JSON returned from your server to follow the REST adapter conventions substituting underscored keys for camelcased ones. Unlike the DS.RESTAdapter, async relationship keys must be the singular form of the relationship name, followed by "_id" for DS.belongsTo relationships, or "_ids" for DS.hasMany relationships.

Since ActiveModelAdapter 2.1.0 however, you don't need the "_id" or "_ids" suffix on keys for relationships.

Conventional Names

Attribute names in your JSON payload should be the underscored versions of the attributes in your Ember.js models. For example, if you have a Person model:

// app/models/famous-person.js

export default class FamousPerson extends Model {
  @attr() firstName;
  @attr() lastName;
  @attr() occupation;
}

The JSON returned should look like this:

{
  "famous_person": {
    "id": 1,
    "first_name": "Barack",
    "last_name": "Obama",
    "occupation": "President"
  }
}

Let's imagine that Occupation and Person are just another model:

// app/models/person.js

export default class Person extends Model {
  @attr() firstName;
  @attr() lastName;
  @belongsTo('occupation') occupation;
}

// app/models/occupation.js
export default class Occupation extends Model {
  @attr() name;
  @attr('number') salary;
  @hasMany('person') people;
}

The JSON needed to avoid extra server calls, should look like this:

{
  "people": [
    {
      "id": 1,
      "first_name": "Barack",
      "last_name": "Obama",
      "occupation_id": 1
    }
  ],
  "occupations": [
    {
      "id": 1,
      "name": "President",
      "salary": 100000,
      "person_ids": [1]
    }
  ]
}

Polymorphic Relationships

If your model has polymorphic relationships, the ActiveModelAdapter supports two forms in your response.

When using ActiveModelSerializers in Rails, you can opt into this payload using the polymorphic: true option when calling has_many or belongs_to.

class BookSerializer
  attributes :id, :name
  belongs_to :person, polymorphic: true
end

The first, and preferred format, is to use the name of the relationship as the key and an object with the type and foreign key as the value.

For example, given the following model definitions:

// app/models/book.js
export default class Book extends Model {
  @attr() name;
  @belongsTo('person', { polymorphic: true }) author;
}

// app/models/author.js
export default class Author extends Model {
  @attr() name;
  @hasMany('book') books;
}

The object would look like:

{
  "type": "person",
  "id": 1
}

and the full payload would look like this:

{
  "book": {
    "id": "1",
    "name": "Yes, Please",
    "author": { // these are the lines
      "id": 1, // that define the
      "type": "person" // polymorphic relationship
    }
  },
  "people": [{
    "id": 1,
    "name": "Amy Poehler"
  }]
}

The second format allows you to specify using two keys in the model's payload following the format of relationship_name_id and relationship_name_type. This format does not work with hasMany relationships. This format may also be removed for Ember Data 3.0; it is currently only supported for legacy reasons.

Using the above model definitions, the single model response would look like this:

{
  "book": {
    "id": "1",
    "name": "Yes, Please",
    "author_id": 1,         // these two lines
    "author_type": "person" // tell Ember Data what the polymorphic
                            // relationship is.
  }
}

The full response would be look like this:

{
  "book": {
    "id": "1",
    "name": "Yes, Please",
    "author_id": 1,         // these two lines
    "author_type": "person" // tell Ember Data what the polymorphic
                            // relationship is.
  },
  "people": [{
    "id": 1,
    "name": "Amy Poehler"
  }]
}

Development Installation

  • git clone this repository
  • yarn install

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

More Repositories

1

ember-electron

⚑ Build, test, compile and package desktop apps with Ember and Electron
JavaScript
806
star
2

ember-cp-validations

Ember computed property based validations
JavaScript
443
star
3

ember-changeset

Ember.js flavored changesets, inspired by Ecto
JavaScript
431
star
4

ember-moment

JavaScript
399
star
5

ember-infinity

⚑ Simple, flexible Infinite Scroll for Ember CLI Apps.
JavaScript
377
star
6

ember-data-model-fragments

Ember Data addon to support nested JSON documents
JavaScript
371
star
7

ember-metrics

Send data to multiple analytics integrations without re-implementing new API
JavaScript
367
star
8

ember-cli-flash

Simple, highly configurable flash messages for ember-cli
JavaScript
355
star
9

ember-light-table

Lightweight, contextual component based table for Ember
JavaScript
312
star
10

ember-data-factory-guy

Factories and helper functions for (unit, integration, acceptance) testing + development scenarios with Ember Data
JavaScript
302
star
11

ember-sortable

Sortable UI primitives for Ember.js
JavaScript
295
star
12

ember-burger-menu

An off-canvas sidebar component with a collection of animations and styles using CSS transitions
JavaScript
279
star
13

ember-cli-sass

Use node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths
JavaScript
276
star
14

ember-notify

Notification messages for your Ember.js app
JavaScript
264
star
15

ember-collection

An efficient incremental rendering component for Ember.js with support for custom layouts and large lists
JavaScript
236
star
16

ember-changeset-validations

Validations for ember-changeset
JavaScript
219
star
17

ember-file-upload

File uploads for Ember apps
TypeScript
201
star
18

emberx-select

Select component for Ember based on the native html select element.
JavaScript
200
star
19

ember-keyboard

An Ember.js addon for the painless support of keyboard events
JavaScript
177
star
20

ember-pikaday

A datepicker component for Ember CLI projects.
JavaScript
159
star
21

ember-impagination

An Ember Addon that puts the fun back in asynchronous, paginated datasets
JavaScript
122
star
22

ember-cli-hot-loader

An early look at what hot reloading might be like in the ember ecosystem
JavaScript
99
star
23

ember-autoresize

Autoresize for Ember Components
JavaScript
88
star
24

ember-cli-windows

🚀 Improve Ember-Cli Performance on Windows
JavaScript
79
star
25

ember-set-helper

A better `mut` helper
JavaScript
68
star
26

ember-inputmask

Ember wrapper around Inputmask.js
JavaScript
68
star
27

ember-collapsible-panel

An unopinionated, zero-dependency panel and accordion
JavaScript
57
star
28

ember-qunit-nice-errors

Because expected true, result false is not enough!
JavaScript
56
star
29

ember-cli-ifa

Ember CLI addon for injecting fingerprinted asset map file into Ember app
JavaScript
54
star
30

emberx-file-input

A tiny Ember component which does one thing and only: select files beautifully.
JavaScript
52
star
31

ember-cognito

AWS Amplify/Cognito and ember-simple-auth integration
JavaScript
32
star
32

ember-validators

A collection of EmberJS validators
JavaScript
24
star
33

ember-cli-bugsnag

Integrates Bugsnag reporting service into your Ember CLI app.
JavaScript
20
star
34

ember-stripe-elements

A simple Ember wrapper for Stripe Elements
JavaScript
18
star
35

ember-popper-modifier

An Ember modifier for working with Popper.js.
TypeScript
14
star
36

ember-launch-darkly

A modern Ember addon to wrap the Launch Darkly service
JavaScript
13
star
37

ember-require-module

Dynamically require modules
JavaScript
7
star
38

ember-indexeddb-adapter

Ember Data adapter for IndexedDB
JavaScript
4
star
39

program-guidelines

Checklist and guidelines for the Adopted Ember Addons org.
JavaScript
3
star
40

ember-cli-deploy-new-relic-sourcemap

Ember CLI Deploy plugin to deploy source maps to new relic
JavaScript
2
star