Backbone.js, JSON API, and Relational Data: A Primer

Josh Clayton

While following patterns suggested by JSON API with Ember may be straightforward, little documentation exists for its usage within Backbone.js. With feed-readers popular in the past few months, I’ve decided to demonstrate how to follow the specification defined by JSON API to provide data to a Backbone application; namely, how to populate collections and models with associated data.

The Application API

Let’s start with the Rails application’s API implementation, which is fairly straightforward:

# app/controllers/api/feeds_controller.rb
class Api::FeedsController < ApplicationController
  respond_to :json

  def index
    feeds = Feed.rss
    respond_with feeds, each_serializer: FeedSerializer

  def show
    feeds = Feed.where(id: params[:id]).rss
    respond_with feeds, each_serializer: FeedSerializer

The controller is using ActiveModel::Serializers to generate JSON responses for both Feed and Entry objects.

# app/serializers/feed_serializer.rb
class FeedSerializer < ActiveModel::Serializer
  attributes :id, :title, :url, :feed_url, :etag, :description

  has_many :entries, serializer: EntrySerializer,
    embed: :ids, include: true, key: :entries

# app/serializers/entry_serializer.rb
class EntrySerializer < ActiveModel::Serializer
  attributes :id, :url, :title, :published, :author, :content

  def content
    object.content || object.summary

These classes result in a JSON structure like this when retrieving api/feeds.json:

  "entries"=> [
      "url"=> "",
      "title"=> "",
      "url"=> "",
      "content"=> ""},
      "content"=> ""}
  "feeds"=> [
      "entries"=> ["a9f9283c34af5c6f7ab6fc461e5ba8ee", "e805ed779257cd0d1f69b747fb01b591"]},
      "description"=> "",
      "entries" => ["6601a53c98e690a46b8bbeca46a6904a"]}

There are two keys, feeds and entries, returned. Each item within feeds maintains a reference to its list of entry IDs, which will need to be associated when building up the structure within the Backbone collection.

The Backbone Application

Let’s look at the Backbone collection:

# app/assets/javascripts/collections/
class @App.Collections.Feeds extends Backbone.Collection
  model: App.Models.Feed
  url: '/api/feeds'
  parse: (response) =>
    @entries = response.entries

parse is doing most of the heavy lifting here, assigning a property entries to the collection (to be used later) and returning response.feeds, which gets assigned internally to models().

With the collection of feeds knowing about entries, it becomes the responsibility of each App.Models.Feed to correctly reference each App.Models.Entry:

# app/assets/javascripts/models/
class @App.Models.Feed extends Backbone.RelationalModel
  relations: [
      type: Backbone.HasMany
      relatedModel: 'App.Models.Entry'
      collectionType: 'App.Collections.Entries'
      key: 'entries'

  initialize: ->
    @set 'entries', _.filter @collection.entries, (entry) =>
      _.indexOf(@get('entries'), >= 0

  title: ->
    @get 'title'

  description: ->
    @get 'description'

  entries: ->
    @get 'entries'

Within App.Models.Feed‘s initialize, we bootstrap the JSON data from the collection’s entries into the entries attribute on the App.Models.Feed model. Because the entries array may contain IDs of entries for other feeds, however, we filter out everything that doesn’t belong. Once the records have been filtered correctly, Backbone-relational.js handles the rest.

For reference, here are App.Models.Entry and App.Collections.Entries:

# app/assets/javascripts/models/
class @FeedMe.Models.Entry extends Backbone.RelationalModel
  title: ->
    @get 'title'

  url: ->
    @get 'url'

  published: ->
    @get 'published'

  content: ->
    @get 'content'

  author: ->
    @get 'author'

# app/assets/javascripts/collections/
class @FeedMe.Collections.Entries extends Backbone.Collection
  model: FeedMe.Models.Entry


While there is a bit of wiring involved, it’s fairly easy to set up a Backbone app to interact with associated data provided by an API following the patterns of JSON API. If you’re using Marionette.js to handle associated data and have examples to share, tweet @thoughtbot to let us know!

Learn More About Backbone.js

If you’re interested in learning how to build Backbone apps, I recommend you check out thoughtbot’s book Backbone.js on Rails, which includes an example app in addition to the book itself.