Usage gon.rabl with Backbone.js

Why

Backbone.js relieved rails' controller by rending templates in javascript. Rails then become more backend oriented providing data interface in JSON.

RABL enables the user to format JSON easily.

Gon is an elegant preload data solution in this combination. It saves an ajax call by preloading the data into the page(you don't have to get data from backbone model/collection any more in most cases).

Work flow

Original:

1. HTTP request => 2. Rails routes => 3. Rails controller logic code and render the view => 4. trigger backbone => 5. Render backbone template and send ajax call to get data -> 6. Update html code generated by template when ajax returns data

Using gon.rabl

1. HTTP request => 2. Rails routes => 3. Rails controller logic code, render the view, and generates json according to rabl template => 4. Trigger backbone => 5. Render template directly with gon data

Preloading data into pages will save a request with server and quicken the page load processing.

Example

pages_controller.rb

def show
  @user = User.find(params[:id])
  gon.rabl
end

show.json.rabl

@object user
attributes :username, :gender

node(:followers_count) { |user| user.followers.count }  # Just an example here, it's better to have a count filed in model

sample_router.coffee

class Sample.Routers.SampleRouter extends Backbone.Router
  routes:
    "users/:id/show" : "showUser"
  
  showUser: ->
    user = new Sample.Models.User(gon.user)
    userView = new Sample.Views.User(model: user)
    $("body").html(userView.render().el)

Warning

Rabl allows you to exclude the root by setting.

# config.include_json_root = false
config.include_child_root = false

Here I just disabled the child root because if you disabled the json root, everything you put to Gon will be like

gon.username = "john doe"; gon.gender = "male"...

instead of

gon.user = { username: "john doe", gender: "male" }

This example provided by @yujingz