I am trying to retrieve my models from the local storage in a collection. I enter into "success" but sometimes my collection is still empty. I thought "success" meant the collection was well fetched.
var self = this;
window.rooms= new Rooms();
window.rooms.localStorage = new Backbone.LocalStorage("rooms-backbone");
window.rooms.fetch({
success: function(model, response, options) {
rooms.each(function(room){
this.template = _.template(tpl.get('RoomView'));
$(self.el).append(this.template(room.toJSON()));
console.log(rooms.toJSON());
console.log(model);
console.log(response);
console.log(options);
});
}
});
How can i populate my UI once i am sure the collection is well filled ?
Thx in advance
Related
My server response is having two objects (picture):
How can i put just secound object members (models) in my Backbone Collection. I am using collection.fetch to get data from server. Can I somehowe addapt my server response.
You can do this by overriding the parse method of your collection:
var coll = Backbone.Collection.extend({
parse: function(data){
return data.statuses;
}
});
Your Collection will contain what you return from your parse function, in this case you reduce it to the statuses array from your server response.
use parse()
see:
http://backbonejs.org/#Collection-parse
in your collection:
yourCollection = Backbone.Collection.extend({
//other collection stuff.
parse: function(response) {
//save the search metadata in case you need it later
this.search_meatadata = response["search_metadata"];
// return the array of objects.
return response["statuses"];
}
});
I'm doing an application with Backbone.js and Require.js. I have an "Opportunities" Backbone collection and I needed to modify the fetch method because the data from the server comes inside a "results" object.
I did the trick by doing something I found in this question, at this point all looks good.
The problem is that I noticed that the fetch method is asking the server for the data TWO TIMES and not ONE as expected.
I am testing and now I found that if I remove this code: return Backbone.Collection.prototype.fetch.call(this, options); Backbone asks the url for the data only one time, obviously this code is causing the problem but I don't know the reason.
This is my Backbone collection
define([
'backbone',
'models/Opportunity'
], function(Backbone, Opportunity){
var Opportunities = Backbone.Collection.extend({
url: "/api/v1/opps/",
model: Opportunity,
// Need to have custom fetch because json data is coming inside a
// "results" array inside the JSON.
fetch : function(options) {
// store reference for this collection
var collection = this;
$.ajax({
type : 'GET',
url : this.url,
dataType : 'json',
success : function(data) {
// set collection main data
collection.reset(data.results);
}
});
// For some reason this is causing a double request
// to the server
return Backbone.Collection.prototype.fetch.call(this, options);
}
});
return Opportunities;
});
Someone knows the reason because this error is happening?
It's fetching it twice because you're using jQuery to fetch it directly, the calling the models own fetch method which will call an AJAX request as well.
If you want to return data.results back to your collection (and subsequently models), you can use the parse method, like:
var Opportunities = Backbone.Collection.extend({
url: "/api/v1/opps/",
model: Opportunity,
parse: function(data){
return data.results;
}
});
I have a Backbone model that is making a successful server request. The callback is using backbone's trigger method to trigger an event in the associated view, and its passing the parsed json response from the server request as the second parameter of the trigger method, as described in the backbone documents. In the view, the event triggers the render method, but the response object is null in the view. It's throwing this error
Uncaught TypeError: Cannot read property 'word' of null
Can anyone see what I might be doing wrong?
The server request from the model
new: function() {
var _this = this;
console.log("new function of model");
$.ajax({
url: "/gamestart",
type: "GET",
success: function(response) {
console.log(response);
var json = $.parseJSON(response);
_this.set({lost: false});
_this.set({win: false});
_this.trigger("gameStartedEvent", json);
}
})
},
the event in the initializer method of the view which triggers the render method to render the response
this.model.on("gameStartedEvent", this.render, this);
the render method where the response is null
render: function(response) {
$("#hint").show();
console.log(response);
var html = this.template({characters: response.word});
this.el.hide();
this.el.html(html).show();
},
Note, if it matters, the view is being instantiated with the model
var word_view = new WordView({model: game})
Update
Actually the error's happening here. The response is returning successfully but i'm parsing it incorrectly. The variable json is null when I check the console. Can you see what I'm doing wrong?
var json = $.parseJSON(response);
console.log(json)
Response
Object {word: Array[6]}
word: Array[6]
__proto__: Object
There was actually no need to call parseJSON on the response object. I could get the word property directly off the response object, so I just passed the response object as the second argument to trigger, and called response.word in the view.
$.ajax({
url: "/gamestart",
type: "GET",
success: function(response) {
console.log(response.word);
var json = $.parseJSON(response); ####unnecessary to parseJSON here
console.log(json);
_this.set({lost: false});
_this.set({win: false});
_this.trigger("gameStartedEvent", response);
}
})
},
I'm working out my first backbone.js app and have run into a bit of a wall. Perhaps someone can help me past this hurdle (gap in my understanding). What I want/need to do is to return the collection data to my router, so I can bind it to a Kendo UI Grid, but I'm not seeing any of the search results in my collection... I figure I must be missing something fundamental, but I'm not sure what it is.
Here is what I have so far:
ES.Router = Backbone.Router.extend({routes: {
'': 'search',
'search': 'search',
'results': 'results'
},
results: function() {
var resultsData = new ES.Results();
var boo = resultsData.fetch({
data: JSON.stringify({"query":"myquery"}),
type: 'POST',
contentType: 'application/json'
});
console.log(boo);
}});
ES.Result = Backbone.Model.extend();
ES.Results = Backbone.Collection.extend({
model: ES.Result,
url: '/search/query'
});
There are a few issues here:
A fetch should be a GET, not a POST, because a fetch should not save or modify anything
Maybe just a personal preference, but I'd url as a function, so as to avoid trying to modify the AJAX request options manually.
The fetch call will always be asynchronous, so you need to either add a success callback in the options hash, or add a listener to the collection's reset event
I'd write the collection like this:
ES.Results = Backbone.Collection.extend({
initialize: function() {
this.query = "test";
},
model: ES.Result,
url: function() {
return '/search/query?query=' + this.query;
}
});
Then set the search when you create the collection:
var resultsData = new ES.Results();
resultsData.query = "soccer";
And use success and/or the on("reset") event to handle the result:
resultsData.on("reset", function(collection) {
console.log(collection);
});
console.log("Fetching....");
resultsData.fetch({
success: function(collection, response) {
console.log("Got data!" + collection.length);
},
error: function(collection, response) {
console.log("Error: " + response.responseText);
}
});
With backbone.js I'm saving a model. A PUT is send to the server and the response is returned. The first time I do it, it returns success, the following times an error is return, because after the first time the response is added to the model.
Save function in Backbone.js:
saveCountry: function() {
this.model.save({},{
success: function(model, response) {
console.log('success! ' + response);
},
error: function(model, response) {
console.log('error! ' + response);
}
});
this.render();
return false;
},
PHP returns a JSON-string:
{"response": "Model saved!"}
Following PUT's get an error as response, because 'response' is added to the model:
Unknown column 'response' in 'field list'
Why is the response added to the model and how do I prevent it?
From Backbone's documentation on model save:
Set a hash of model attributes, and sync the model to the server. If
the server returns an attributes hash that differs, the model's state
will be set again.
http://documentcloud.github.com/backbone/docs/backbone.html#section-41
What to do to make it work: don't return {"response": "Model saved!"} from the server. Just return a success (status 200) with no content.
If the save did not work, return a JSON with the errors, and Backbone will trigger an error event on your model, with the JSON you provided (see http://documentcloud.github.com/backbone/docs/backbone.html#section-41 and http://documentcloud.github.com/backbone/docs/backbone.html#section-145).
Just to resurrect an ancient thread...
It isn't always possible/desirable to change the response you get back from the server.
Another solution is to override parse in the model to take care of this. For your situation, where the response is inappropriate for ALL of your models, you could do it in a superclass.
MyModel = Backbone.Model.extend({
parse: function(data) {
delete data["success"];
return data;
}
});
Address = MyModel.extend({
saveCountry: function() {
this.model.save({},{
success: function(model, response) {
console.log('success! ' + response);
},
error: function(model, response) {
console.log('error! ' + response);
}
});
this.render();
return false;
},
...
});