Question

I have a backbone application which, upon load, needs to fetch data from four different collections (Rails–>JSON back end).

That’s four hits to the server, and I’m guessing there’s a better way.

I started out by trying to pass Rails to_json() of the query results into the router initialization in the Rails view such as:

<script type="text/javascript">
  $(function() {
      window.router = new Backbonedemo.Routers.CalendarsRouter({calendars: [], tasks: <%= @tasks %>});
      Backbone.history.start();
      });
</script>

but that brought no joy.

So, what’s the correct way to run the equivalent of fetch() at startup, without having to hit JSON for each collection I want to collect?

Answer 1

Check out the rabl gem. It allows you to customize your json response to a much greater degree than regular to_json will allow.

Here’s a basic way to set up a project where you need to deliver a load of JSON up front:

First, set up your controller to pull data on page load, for examlpe localhost:3000/home would look in the home controller index:

class HomeController < ApplicationController
  def index
    @user = current_user
    render 'user.json' # this line is not actually required most of the time when using backbone and proper ajax/json requests
  end
end

Next, set up a rabl template, this takes the place of a view or a partial, and returns JSON to your client. I’m actually going to use a partial, to make loading into the home/index.html view nice and easy:

# views/home/_user.json.rabl
object @user
attributes :id, :first_name, :last_name, :birthdate, :gender, :nickname, :email
node(:avatar_thumb_url) { |u| u.avatar.url :thumb }
node(:roles) { |u| u.roles }
node(:name) { |u| "#{u.first_name} #{u.last_name}".strip }
node(:errors) { |u| u.errors.to_hash if u.errors.present? }
child :awesome_calendars => :calendars do
  attributes :id, :date, :description
  child :events do
    attributes :title, :description
  end
end

That’s some relatively fancy rabl that will deliver a bunch of json, including a related set of records, all in one JSON object.

In your html view that loads up backbone, you need to pass the controller’s object to the partial:

# views/home/index.html.erb
<script type='text/javascript'>
    $(function() {
      window.router = new Backbonedemo.Routers.CalendarsRouter(<%= render('user.json.rabl', user: @user).html_safe -%>);
    Backbone.history.start();
  });
</script>

To recap:

1. controller renders regular html.erb view (the one that starts up backbone)
2. that view also renders a partial–this partial is a rabl template that returns strictly JSON
3. backbone takes that JSON and does whatever you want with it.

The beauty of this is that you can set up json.rabl responses for any of your controller actions and have them return a variety of json stuff, all easily controllable. The thing I did above is the “difficult” part where you want to load up stuff from many tables into a single JSON call on your first page load–avoiding multiple AJAX/backbone fetch requests.

Make sense? I hope so… : / let me know if anything is unclear.