Develop Reference

each() function is not defined on this.collection

I am trying to make ajax request to server. I am using fetch() method on collection. It successfully retrieves data from server after monitoring google chrome network tab.
Here is scenario.
I have Model below
var Model = Backbone.Model.extend({
urlRoot: '/contacts',
});
collection below
var Collection = Backbone.Collection.extend({
model: Model,
url: '/contacts'
});
ViewOne below
var ViewOne = Backbone.View.extend({
initialize: function () {
var collection = new Collection().fetch(); // also tried with these options { wait:true, reset: true, async: false }
new ViewTwo({ collection: collection });
}
});
Below is ViewTwo
var ViewTwo = Backbone.View.extend({
initialize: function () {
this.collection.each(this.render, this); // Uncaught TypeError: undefined is not a function
},
render: function () {
console.log(this.model);
}
});
As you can see I am getting Uncaught TypeError: undefined is not a function error.
this.render exist so that is not a problem. The problem is each function on this.collection. How can I solve this proble?

simply create new view in success callback of fetch
var ViewOne = Backbone.View.extend({
initialize: function () {
var collection = new Collection();
collection.fetch({
success:function(){
new ViewTwo({ collection: collection });
}
});
}
});

Backbone API is not fluent, which means that Collection.fetch does not return itself, it returns the Ajax object used in fetch.
Try
var ViewOne = Backbone.View.extend({
initialize: function () {
var collection = new Collection();
collection.fetch();
new ViewTwo({ collection: collection });
}
});
And note that the collection.fetch is asynchronous, this.collection will be probably empty in ViewTwo.initialize. See Backbone.js - data not being populated in collection even though fetch is successful for example.

Backbone fetch success and error function issue

I've a fetch method on a collection. The callback function success and error is never called but the fetch happens correctly and fill the collection. It seems very strange.
var TweetsCollection= new Tweets();
TweetsCollection.fetch({
success:function (tweets){<---never called
alert("ok");
},
error:function(c){<---never called
alert("ko");
}
});
console.log(TweetsCollection);<---- collection correctly filled
and this is the fetch methof od TweetsCollection:
fetch: function(options) {
var collection = this;
var params = {
user_id: this.query,
page:this.page
};
cb.__call(
"statuses_userTimeline",
params,
function (reply) {
// console.log(reply);
collection.reset(reply);
// return reply;
}
);
}

You don't have to override the fetch method.
If you want to add extra logic to the sync process, you override the sync method.

Backbone Marionette.js reqres framework doesn't wait for collection to get populated

I'm using Backbone.Marionette's request-response framework to fetch data in collection and then response it to the request object that request it, but obviously it doesn't wait for collection to get populated. And here is my code:
This is where it is requesting the data:
// Module: Timeline, ListController
var employees = App.request('employee:timeline');
and here is where i set my handler:
// Entities Module
App.reqres.setHandler('employee:timeline', function() {
return API.getEmployeesForTimeline();
});
and here is my API's function:
getEmployeesForTimeline: function() {
var employees = new Entities.EmployeeCollection();
employees.fetch({
success: function(employees) {
returnEmployees(employees);
}
});
function returnEmployees(employees) {
// doing some things with employees collection
return leaves;
}
}

Use a promise to pass the results back:
getEmployeesForTimeline: function() {
var employees = new Entities.EmployeeCollection();
var deferred = $.Deferred();
employees.fetch({
success: deferred.resolve
});
return deferred.promise();
}
// Entities Module: UNCHANGED
App.reqres.setHandler('employee:timeline', function() {
return API.getEmployeesForTimeline();
});
//request data
var promise = App.request('employee:timeline');
promise.done(function(employees){
//use employees
});

Fetch collection only one time

i've a userlist made by a fetch from parse.com and rendered by view.Once people click on item list i've insert in url the objectid. In router i've made a function "home" that make fetch from collection and call view to render.The function "userdetails" catch objectid previous insert by view in url and use it to make a get from collection. The problem is:how can i pass the collection to this function userdetails?I don't want make another fetch.
home: function() {
var self=this;
console.log("inrouterhome");
var utenti = new Usercollection();
utenti.fetch({
success: function(object) {
var page=new Homelistuser({model:object});
self.changePage(page);
},
error: function(amici, error) {
// The collection could not be retrieved.
}
});
},
userDetails: function (objectId) {
HERE I WANNA USE OBJECTID TO MAKE A GET FROM COLLECTION FETCHED IN HOME
},

It looks like it is probably a scoping issue. Try this
var Models = {};
var AppRouter = Backbone.Router.extend({
home: function() {
var self=this;
console.log("inrouterhome");
Models.utenti = new Usercollection();
Models.utenti.fetch({
success: function(object) {
var page=new Homelistuser({model:object});
self.changePage(page);
},
error: function(amici, error) {
// The collection could not be retrieved.
}
});
},
userDetails: function (objectId) {
//Models.utenti should exist as long as home came first,
// may want to write a condition that check to see if it exists and if not do fetch.
}
});

As #abritez mentioned this is probably a scoping problem i.e. the userDetails method doesn't have access to the instantiated collection. #abritez's solution resolves this but if the user refreshes the page or accesses the route directly the collection will not be loaded.
If the collection is used between both routes consider fetching it at run time and using a listener for when it's ready:
var Models = {};
Models.utenti = new Usercollection();
Models.utenti.fetch();
var AppRouter = Backbone.Router.extend({
home: function() {
var utentiLoaded = function(object) {
var page = new Homelistuser({model:object});
this.changePage(page);
}
this.listenTo(Models.utenti, 'reset', utentiLoaded);
this.listenTo(Models.utenti, 'error', function(amici, error) {
// The collection could not be retrieved.
});
if (Models.utenti.any()) {
utentiLoaded(Models.utenti);
}
},
userDetails: function(objectId) {
var utentiLoaded = function(object) {
}
this.listenTo(Models.utenti, 'reset', utentiLoaded);
this.listenTo(Models.utenti, 'error', function(amici, error) {
// The collection could not be retrieved.
});
if (Models.utenti.any()) {
utentiLoaded(Models.utenti);
}
}
});

Backbone Boilerplate - fetch method don't refresh collection

is my first question here, so I please about some patience and forgive my english:)
When I type link in browser address bar, all is OK. But when I do this inside browser by clicking element, collection is empty. But the main problem is there is always the same response from server, but fetch "dont load" any items, so view render empty collection.
I use Backbone Boilerplate,
Browser.Views.Catalog - it is Backbone.View
Browser.Catalog - it is of Backbone.Collection
My router:
var Router = Backbone.Router.extend({
routes: {
'' : 'browse'
},
refreshCatalog: function(folder){
app.layout.setViews({
"#catalog" : new Browser.Views.Catalog({
collection: app.catalog
})
}).render();
},
browse: function(folder){
app.catalog = new Browser.Catalog();
app.folders.fetch({
error: function() { console.log(arguments); },
success: this.refreshFolders(folder),
data: $.param({folder: folder}),
cache:false
});
//app.catalog = new Browser.Catalog();
app.catalog.fetch({
error: function() { console.log(arguments); },
success: this.refreshCatalog(folder),
data: $.param({folder: folder}),
cache:false
});
},

I belive you should set the catalog in the initialize function
app.catalog = new Browser.Catalog();
should go in here ( add this function)
initialize: function (options) {
app.catalog = new Browser.Catalog();
}
the initialize function is called when the page is loaded so when browsing to #catelog it will have been set http://backbonejs.org/#Router-constructor