Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Integrating Backbone JS with Rails Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 413
    Comment on it

    Integrating Backbone JS with Rails Application

    It is an era of Single Page Applications. So there are multiple javascripts framework available that supports SPA. Two most popular frameworks are:
    Backbone JS
    Angular JS
    In this section we will talk about easily integrating backbone js with a rails application. If you want to integrate backone js with your rails application in a rails familiar way, rails-backbone gem is best to use. Lets simply see how easy it is.

    1) Add rails-backbone gem to your Gemfile.


    2) Then run bundle.


    3) After this to create the backbone directory structure you need to run this command:

    	rails g backbone:install
        insert  app/assets/javascripts/application.js
        create  app/assets/javascripts/backbone/routers
        create  app/assets/javascripts/backbone/routers/.gitkeep
        create  app/assets/javascripts/backbone/models
        create  app/assets/javascripts/backbone/models/.gitkeep
        create  app/assets/javascripts/backbone/views
        create  app/assets/javascripts/backbone/views/.gitkeep
        create  app/assets/javascripts/backbone/templates
        create  app/assets/javascripts/backbone/templates/.gitkeep
        create  app/assets/javascripts/backbone/

    Thus we can see in the app/assets/javascripts/backbone folder that it has created the architecture of backbone. You will be thinking from now you need to write everything on your own for controllers, models and all. but you are wrong, this gem provides generator which are similar to rails generate to take the headache from you.

    Models: Suppose you have a product model with price and name, then you can create a corresponding model in backbone like this:

    	rails g backbone:model Product name:string price:integer
    	# This will create a model file like this
    	class BackboneApp.Models.Product extends Backbone.Model
      paramRoot: 'product'
    	    name: null
    	    price: null
    	class BackboneApp.Collections.ProductsCollection extends Backbone.Collection
    	  model: BackboneApp.Models.Product
    	  url: '/products'

    Routers: There is generator available also for routers, suppose you want to create the routes for the product model you can do that like this:

    	rails g backbone:router products index
    	# It will create these files:
    	create  app/assets/javascripts/backbone/routers/
      create  app/assets/javascripts/backbone/views/products/
      create  app/assets/javascripts/backbone/templates/products/index.jst.ejs

    Scaffold: Just like rails scaffold if you want to generate models, views and routes in one hit, this gem also supports scaffold generators. You can create everything at one hit like this:

    	rails g backbone:scaffold item quantity:integer price:integer
    	# It will generate these files:
    	  create  app/assets/javascripts/backbone/models/
        create  app/assets/javascripts/backbone/routers/
        create  app/assets/javascripts/backbone/views/items/
        create  app/assets/javascripts/backbone/templates/items/index.jst.ejs
        create  app/assets/javascripts/backbone/views/items/
        create  app/assets/javascripts/backbone/templates/items/show.jst.ejs
        create  app/assets/javascripts/backbone/views/items/
        create  app/assets/javascripts/backbone/templates/items/new.jst.ejs
        create  app/assets/javascripts/backbone/views/items/
        create  app/assets/javascripts/backbone/templates/items/edit.jst.ejs
        create  app/assets/javascripts/backbone/views/items/
        create  app/assets/javascripts/backbone/templates/items/item.jst.ejs

    Thus you can see that its very easy here to create the setup for backbone in your rails app. For learning more about backbone you can go through the link:

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: