CODEWITHSUNDEEP
ruby-on-railsbackbone.js
Trip
Trip

Reputation: 27114

How do you send an instance variable from a rails Controller to a BackBone Model?

Supposed I have two different Objects I am trying to load in an eventual BackBone view.

My Rails Controller

def index
  @visuals = Visual.all
  @words   = Word.all

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: [@visuals, @words] }
  end
end

On place I can add it is here :

My Rails View:

#visuals

:javascript
  $(function() {
    window.router = new AiProject.Routers.VisualsRouter({test_visuals: #{ @visuals.to_json.html_safe } });
    // AiProject.words = new Words(#{@words.to_json});
    //  ^^ Would this be the best place to insantiate my controller code's instance variable?
    Backbone.history.start();
  });

But other people say to put it in your template. Which is strange because I think my BackBone's framework puts it in the router:

Coffee BB Router

show: (id) ->
  visual = @visuals.get(id)

  @view = new AiProject.Views.Visuals.ShowView(model: visual)
  $("#visuals").html(@view.render().el)

So if that was the case, maybe I should try and insantiate @words there?

Upvotes: 0

Views: 980

Answers (1)

x1a4
x1a4

Reputation: 19485

edit - this was not talking about bootstrapping.

You need to be calling the index action somewhere, probably directly via jQuery.ajax as it doesn't correspond directly to a single backbone model or collection.

In the success handler of your ajax call, you can assign the returned data to whatever you want to assign it to in backbone.

I would probably have models for single visuals and words, then collections of each as well (in raw javascript as i'm out of practice with coffeescript at the moment):

MyApp.Models.Visual = Backbone.Model.extend();
MyApp.Models.Word = Backbone.Model.extend();

MyApp.Collections.Visuals = Backbone.Collection.extend({
  model: MyApp.Models.Visual
});

MyApp.Collections.Words = Backbone.Collection.extend({
  model: MyApp.Models.Word
});

var visuals, words;

$.ajax({
  url: <path to index action>
  dataType: 'json',
  success: function (data) {
    visuals = new MyApp.Collections.Visuals(data[0]);
    words = new MyApp.Collections.Words(data[1]);
  }
});

at this point, you have your visuals and words collections, and can do whatever you need to do with them.

Upvotes: 3

Related Questions