How does Backbone.js save data in my Rails model?

Question

I'm using Rails together with Backbone and I've been learning a lot, but I'm having a problem I can't wrap my head around.

I have two models, a User and a Movie model.

ActiveRecord::Schema.define(version: 20141016152516) do

  create_table "movies", force: true do |t|
    t.string   "title"
    t.datetime "created_at"
    t.datetime "updated_at"
    t.integer  "user_id"
  end

  create_table "users", force: true do |t|
    t.string   "name"
    t.string   "email"
    t.datetime "created_at"
    t.datetime "updated_at"
    t.string   "password_digest"
    t.string   "remember_digest"
  end

  add_index "users", ["email"], name: "index_users_on_email", unique: true

end

The User model has_many movies and the Movies model belongs_to users.

I've been using Backbone collections to add a movie to the view of the User like this,

class Movieseat.Collections.Movieseats extends Backbone.Collection

  url: '/api/movies'
  defaults: 
    title: ""

Through my Index view

class Movieseat.Views.MovieseatsIndex extends Backbone.View

  template: JST['movieseats/index'] 

  initialize: -> 
    @collection.on('update', @render, this)
    @collection.on('add', @appendEntry, this)

  render: -> 
    $(@el).html(@template())
    @collection.each(@appendEntry)
    this

  events: -> 
    "click li": "addEntry" 

  addEntry: (e) -> 
    movie_title = $(e.target).text()
    @collection.create title: movie_title

  appendEntry: (entry) ->
    view = new Movieseat.Views.Entry(model: entry)
    $('#entries').append(view.render().el)

And this is my Entries view

    class Movieseat.Views.Entry extends Backbone.View

      template: JST['movieseats/entry']
      className: 'movie-frame'

      render: -> 
        $(@el).html(@template(entry: @model))
        this

This is all working fine. I've got a few movie titles as static text on my page. When a user clicks on a movie title it gets added to the view. But the thing I don't understand is, where does the movie title get saved? And how can I find it using the Rails console?

I tried doing a Movie.all in the console which shows all the movies in the Movie model I made when I used a form to add movies to the model. It does not show the movie titles of the static titles. But if remove has_many :movies from the User model the app crashes.

So what's the connection between User, Movies and Rails and Backbone?

machineghost machineghost · Accepted Answer · 2014-10-18T21:30:57

In modern Javascript in general all communication between the server (Rails) and the client (Backbone) happens via AJAX (although sometimes form submissions are also used in addition). In Backbone specifically, AJAX requests revolve mainly around two methods: fetch and save (other methods such as remove can also trigger AJAX). fetch takes data from Rails and brings it in to Backbone, while save does the reverse and brings data from Backbone in to Rails.

In order for that to work with your Movie model you need:

a Rails endpoint (eg. example.com/api/movie) on your server that expects to be given JSON for a Movie and saves it as a Rails record
a Backbone.Model with a url property that points to the Rails endpoint

If you have these two and you call save on your Movie Backbone.Model the model will POST its attributes, in JSON form, to the model's URL, at which point your Rails endpoint can receive that JSON and store it in your database.

Similarly when you call fetch on that Movie model, Backbone will make an AJAX request to that same URL, only instead of a POST it will be a GET request. The Rails endpoint in this case should return the JSON representation of the Movie, which Backbone will then convert to model attributes.

Hope that helps.

P.S. Since User is just another model like Movie, everything I said about Movie applies equally to User.

How does Backbone.js save data in my Rails model?

1 Answers