Gon + RABL + Backbone? about gon

[gazay]

Sorry, but I don't know. Didn't use backbone at all yet)) If you'll do this or find the example - tell me please, I'm interesting in it too

[yujingz]

Hi @netwire88 , I know it's kind late but if you still need that, I can help.

[gazay]

Hello, @hzyh64160! Maybe if you can write some instructions or example for it - it will be great and I'll put it in wiki

[yujingz]

Hi @gazay I will be more than happy to write some examples about this! I will do it this weekend and post it here.

[gazay]

@hzyh64160 thank you!

[yujingz]

Correct me if I said anything inappropriate :)

Using Gon + RABL + 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" }

[yujingz]

I really enjoyed this combination and hope this can be helpful.

[gazay]

Thank you! Already added to wiki https://github.com/gazay/gon/wiki/Usage-gon.rabl-with-Backbone.js