CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3backbone.js
vekozlov
vekozlov

Reputation: 684

Backbone fetch doesn't work

I am a little bit stuck on trying to fetch a Backbone Colection, I am a new to Backbone and I am sure that I've missed something simple, but do not know what.

Have some ideas?

$ ->


User = Backbone.Model.extend(
    urlRoot: "/users"
    )
  user = new User()

  View = Backbone.View.extend(
    tagName: "li"
    el: "ul"
    id: "#users"
    template: _.template("<li>...just a code...<span class='buttons'><button class='info'>Info</button><button class='delete'>Delete</button></span></li>")
    render: -> 
      @$el.html(@template())
    )



view = new View(
    model: user
    )
  view.render().el

  Users = Backbone.Collection.extend(
    model: User
    url: "/users"
    parse: (resp, xhr) ->
      return resp.toJSON()
    )



usersCollection = new Users() 
  usersCollection.fetch(
    success: (response) ->
      console.log 'success'
      console.log usersCollection
      console.log response
    error: (data, response) ->
      console.log(response)
    )

My "/users/ returns this Array:

[{"created_at":"2013-05-25T18:00:43Z","email":"[email protected]","id":1,"updated_at":"2013-05-25T18:00:43Z"},{"created_at":"2013-05-25T18:00:43Z","email":"[email protected]","id":2,"updated_at":"2013-05-25T18:00:43Z"},{"created_at":"2013-05-25T18:00:43Z","email":"[email protected]","id":3,"updated_at":"2013-05-25T18:00:43Z"},{"created_at":"2013-05-25T18:00:43Z","email":"[email protected]","id":4,"updated_at":"2013-05-25T18:00:43Z"},{"created_at":"2013-05-25T18:00:43Z","email":"[email protected]","id":5,"updated_at":"2013-05-25T18:00:43Z"},{"created_at":"2013-05-25T18:00:43Z","email":"[email protected]","id":6,"updated_at":"2013-05-25T18:00:43Z"},{"created_at":"2013-05-25T18:00:43Z","email":"[email protected]","id":7,"updated_at":"2013-05-25T18:00:43Z"}]

And controller (Ruby on Rails) looks like this:

  def index
    users = User.all
    render json: users, status: 200
  end

And in console.log I have:

success
child {length: 1, models: Array[1], _byId: Object, constructor: function, model: function…}

Upvotes: 0

Views: 167

Answers (2)

deChristo
deChristo

Reputation: 1878

Try adding an initialize property in your View definition and bind the event to the object using "listenTo" for when the collection resets (e.g.):

View = Backbone.View.extend(
    tagName: "li"
    el: "ul"
    initialize: function(){
        this.collection = new app.YourCollection();
        this.collection.fetch({ reset: true });

        this.listenTo(this.collection, 'reset', this.render);
    },

then on the render property(method in this case):

render: function(){
        this.collection.each(function(item){
            this.renderWeeklyMenu(item);
        }, this);
    },

renderItem: function(item){
        var itemView = new app.itemView({
            model : item
        });
        this.$el.append(itemView.render().el);
    }

And "fetch" returns JSON data so you don't need:

parse: (resp, xhr) ->
      return resp.toJSON()
    )

Hope this helps.

Upvotes: 1

Peter Lyons
Peter Lyons

Reputation: 146044

Delete your parse function as your response is the format backbone expects by default. It will properly parse the JSON and treat the array as a collection of data objects which will get converted into model instances.

So your fetch is working, but you are not properly A) including any data from your collection or models in your view (so you can't easily see whether it's working or not and B) rerendering the view with the data after it loads by binding to the collection's sync event.

Upvotes: 0

Related Questions