CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-views
Hosni
Hosni

Reputation: 668

backbone.js View doesn't reset

I need to work with backbone.js, i can't go to "render" part inside my view here is my code:

var Vigne = {
Models:{},
Collections: {},
Views:{},
Templates:{}
}

Vigne.Models.Raisin = Backbone.Model.extend({})

Vigne.Collections.Grape = Backbone.Collection.extend({
model: Vigne.Models.Raisin,
url: "./scripts/data/vin.json",
initialize: function (){
    console.log("grape initialised");
}
});

Vigne.Views.Grape= Backbone.View.extend({
initialize: function(){
    _.bindAll(this,"render");
    this.collection.bind("reset",this.render);
},
render: function(){
    console.log("render");
    console.log(this.collection.length);
}
})

Vigne.Router = Backbone.Router.extend({
routes:{
    "": "defaultRoute"
},

defaultRoute: function(){
    console.log("defaultRoute");
    Vigne.grape = new Vigne.Collections.Grape()
    new Vigne.Views.Grape ({ collection : Vigne.grape });
    Vigne.grape.fetch();
    console.log(Vigne.grape.length);
}
}
);

var appRouter= new Vigne.Router();
Backbone.history.start();

I am expecting it to display my collection's length in the debugger's console, it seem's like it doesn't reset. Any ideas?

Edit:

i added this within the fetch function:

success: function(){
console.log(arguments);
},
error: function() { 
    console.log(arguments); 
    }
});

and the fetch function succeed on getting the json file, but it doesn't trigger the reset function.

Upvotes: 0

Views: 2464

Answers (2)

Hosni
Hosni

Reputation: 668

i solved this problem by setting the attribute within the fetch function to true:

Vigne.grape.fetch({

   reset:true,   

   error: function() { 
    console.log(arguments); 
    }
  }

);

This book helped me : http://addyosmani.github.io/backbone-fundamentals/

Upvotes: 3

Sachin Jain
Sachin Jain

Reputation: 21842

Backbone calls reset() on fetch success which in turns triggers reset event. But If your fetch fails due to some reason, you won't get any event. So you have to pass an error handler in fetch method and use it to identify the error and handle it.

Vigne.grape.fetch({
    error: function() { 
        console.log(arguments); 
    }
});

You can also pass success call back and you will be able to know the problem in your fetch. You can also use Charles proxy/Chrome Debuuger Tool to identify if you are getting proper response from your backend.

Can you please paste your response what you are getting from server. You may vary the data but just keep the format right.

Edit: One more problem I can see is that you have not defined attributes in your model So after Backbone fetch, it refreshes your collection with the new models fetched from server. Fetch method expects an array of json objects from server and each json object in response array should match with the attributes you have set in defaults in your model Otherwise it won't be able to create new models and hence won't be able to refresh your collection. Can you please rectify this and let me know.

Upvotes: 2

Related Questions