I'm new to Backbone.js, I'm following a tutorial trying to adapt it to my needs.
I'm calling the fetch method from the main app view in order to retrieve multiple objects to be inserted in the collection.
I can see in chrome that the json data are returned, the fetch functions returns success but the collection is not populated.
I'm using IcanHaz for rendering. It prints out only the default model as I defined it in the Job model.
var Job = Backbone.Model.extend({
defaults: {
title: 'Not specified',
status: 0,
created_at: 'Not specified'
}
});
var JobView = Backbone.View.extend({
render: function () {
// template with ICanHaz.js (ich)
this.el = ich.jobRowTpl(this.model.toJSON());
return this;
}
});
// define the collection of jobs
var JobCollection = Backbone.Collection.extend({
model: Job,
url: '/api/1.0/jobs/'
});
// main app, the collection view
var AppView = Backbone.View.extend({
tagName: 'tbody',
initialize: function() {
this.jobs = new JobCollection();
this.jobs.on('all', this.render, this);
this.jobs.fetch({
error: function () {
console.log("error!!");
},
success: function () {
console.log("no error");
}
}).complete(function () {
console.log('done');
console.log('length1:' + this.jobs.length);
});
console.log('length2: '+ this.jobs.length);
},
render: function () {
this.jobs.each(function (job) {
var tmpjob = new JobView({model: job}).render().el;
$(this.el).append(tmpjob);
console.log('job': + this.tmpjob);
}, this);
return this;
}
});
var app = new AppView();
$('#app').append(app.render().el);
In the Chrome console I get this:
length2:0
job:undefined
no error
done
Uncaught TypeError: Cannot read property 'length' of undefined //referring to the lenght1 logging
These are the data that I fetch, from the chrome inspector under network/xhr/response:
{"count": 2, "next": null, "previous": null, "results": [{"id": 1, "title": "testAlbum", "status": 0, "created_at": "2012-12-31"}, {"id": 2, "title": "testAlbum2", "status": 0, "created_at": "2012-12-31"}]}
I don't understand why the 'jobs' collection exists after calling the fetch method but it is undefined inside the fetch block when the 'success' helper has been called.
And why the collection is not being populated despite it returns success and the json data are returned from the server?
I'm quite lost.
Add a parse method to your collection that just returns the results arrays. A collection needs to be an array of models, not your whole JSON response.
The Backbone docs explain how to use parse.
Related
I am trying to view the collection i import from the service, using backbone on the client side, and python/flask as the service. When i make the GET request, i get the following data back:
{"entries": [{"Title": "my title 1", "Description": "My desc 1", "Info": "Info 1", "ids": 1}, {"Title": "my title 2", "Description": "My desc 2", "Info": "Info 2", "ids": 2}]}
But those entries are not showing on my page, even though i use fetch. This is my ListView code:
var app = app || {};
app.ContactListView = Backbone.View.extend({
el: '#contacts',
initialize: function () {
this.collection = new app.ContactList();
this.collection.fetch({reset: true});
this.render();
this.listenTo( this.collection, 'reset', this.render );
},
render: function () {
this.collection.each(function( item ){
this.renderContact( item );
}, this );
},
renderContact: function ( item ) {
var contactView = new app.ContactView({
model: item
});
this.$('#ContactTable').append( contactView.render().el );
}
});
What might be the cause?
The reason is because your collection is expecting an array of models as it's response but your service is returning the array under entries. From the documentation
parse is called by Backbone whenever a collection's models are
returned by the server, in fetch. The function is passed the raw
response object, and should return the array of model attributes to be
added to the collection.
To work around that you can simply override your parse method to return the array of models.
For example:
app.ContactList = Backbone.Collection.extend({
//...
parse: function (response) {
return response.entries;
}
})
I'm building my first, relatively simple Backbone app. Right now, it's fetching JSON of local weather information:
Weather = Backbone.Model.extend({
url: '/api/v1/weather',
initialize: function(){
this.fetch({
success: this.fetchSuccess,
error: this.fetchError
});
},
parse: function(response)
{
return response;
},
fetchSuccess: function (model, response) {
console.log('FETCH SUCCESS:', response);
},
fetchError: function (model, response) {
throw new Error("FETCH ERROR");
}
});
The above seems to work just fine, as the fetchSuccess console log returns the JSON response as expected.
The problem happens when I attempt to access this data from the view. Here's my code for that:
WeatherView = Backbone.View.extend({
el: $('#widget__weather'),
initialize: function()
{
_.bindAll(this, 'render');
this.model = new Weather();
this.model.bind('reset', this.render);
this.render();
},
render: function()
{
console.log(this.model.toJSON());
// var template = _.template(weatherTemplate, { weather : this.model });
// this.$el.html(template);
}
});
The console log for the view is an empty Object { }. My attempts to use this.model.get('timezone') result in undefined.
When I console.log(this.model) I get this:
s {cid: "c3", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}
_changing: false
_events: Object
_pending: false
_previousAttributes: Object
attributes: Object
currently: Object
daily: Object
flags: Object
headers: Array[13]
hourly: Object
minutely: Object
offset: -4
timezone: "America/New_York"
__proto__: Object
changed: Object
cid: "c3"
__proto__: n
It seems that my JSON data is in the 'attributes' object of the model, but I don't know why it's there or how to access it.
To be clear, when I do console.log(this.model.toJSON()); I get an empty Object { }.
I feel like I'm missing something obvious here and could use any and all help. What am I doing wrong? Is it possible that the structure of the returned JSON data may be causing this? It's a pretty standard response from Forecast.io API.
Let me know if you need any more code / information.
EDIT:
With some help I fixed the issue. Turns out this was the culprit: this.model.bind('reset', this.render);. Changing that to this.model.bind('change', this.render); fixed the problem.
yes is correct.
If you write this:
console.log(this.model);
Uou get the instance of the model, every property that you have parsed are inside attributes.
Instead if you use
console.log(this.model.toJSON());
you transform the instance of the model to a json and you can get directly your property without passing by attributes
Then if you wanna print your data inside your template you need to do this:
if you use:
var template = _.template(weatherTemplate, { weather : this.model });
inside template you need to print your var in this way:
weather.attributes.timezone;
Instead if you use
var template = _.template(weatherTemplate, { weather : this.model.toJSON() });
inside template you need to print your var in this way:
weather.timezone;
I've got a simple Backbone collection that pulls a list of objects from a (remote) resource. Calling Collection.fetch, though, fails with this error:
Object [object Object] has no method '_validate'
I'm guessing this is happening under the hood when the collection attempts to create a model instance for each JSON object while adding. Can anyone shed some light on why this would happen?
Here's the code I'm using. Very bare bones...
/* Models */
var SomeModel = Backbone.View.extend({});
/* Collections */
var SomeCollection = Backbone.Collection.extend({
url: 'http://localhost:8000/api/some/resource/?format=json',
model: SomeModel,
parse: function(data) {
return data.objects
}
});
var SomeView = Backbone.View.extend({
collection: new SomeCollection(),
initialize: function() {
this.collection.fetch();
},
});
And here's an example of the resource response:
{
"meta": {
"count": 100
},
"objects": {
{"title": "Title", "id": 1},
{"title": "Title 2", "id": 2}
}
}
You probably didn't set your collection's model option to a valid Backbone.Model subclass. When the collection fetches the data it will instantiate models and call set, which will call _validate, which a valid Backbone.Model subclass will have, but your instances do not. See the annotated source code for Backbone.Collection.fetch for details.
Thanks for posting code. here's the problem. Your SomeModel extends View instead of Model. My guess is copy/paste/forget-to-edit.
var SomeModel = Backbone.View.extend({});
I'm attempting to use Backbone.js to simplify data (JSON) management and interaction with DOM.
Firstly, I'm not sure if Backbone.js can indeed simplify and improve the current process, but I'd like to assume it can.
Previously I'm retrieving the data with jQuery AJAX function. Now, I'm retrieving the data(still with AJAX) Backbone style into the Backbone model.
For update, previously I was parsing through the JSON object itself to update data. I would then send back the updated json to the back-end (just as I've received it).
Now, is it possible to use the set function in Backbone to simplify something like the below and ideally where should the set attribute behaviour (and all other UI bindings like change events) be constructed? Would it be on the fetch() success handler, which is in the View initializer?
function setBucketOffer(bucketName, newId) {
var segments = json.segments;
for (var i = 0; i < segments.length; i++) {
if (segments[i].market.toLowerCase() === g_market) {
var genders = segments[i].gender;
for (var i = 0; i < genders.length; i++) {
if (genders[i].name.toLowerCase() === g_segment) {
var buckets = genders[i].buckets;
for (var i = 0; i < buckets.length; i++) {
if (buckets[i].name === bucketName) {
buckets[i].confirm = newId;
return;
}
}
}
}
}
}
}
Example JSON
{
"segments": [
{
"market": "Market1",
"gender": [
{
"name": "male",
"buckets": [
{
"name": "Market1_M_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": ""
},
{
"name": "Market1_M_North",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": ""
}
]
},
{
"name": "female",
"buckets": [
{
"name": "Market1_F_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
}
]
}
]
},
{
"market": "Market2",
"gender": [
{
"name": "male",
"buckets": [
{
"name": "Market2_M_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
},
{
"name": "Market2_M_North",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
},
{
"name": "Market2_M_South",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
}
]
}
]
}
]
}
Edit 1
From here, I'm trying to make good use of Parse and to get just segments from my JSON:
var Offers = Backbone.Collection.extend({
url: 'URL',
parse: function (response) {
return response.segments;
}
});
Here, I'm getting more than just response.segments. Also not sure if it's right for me to use the render function or fetch success function to populate the DOM. Suppose I have my html template in the DOM... I want to clone it using jQuery clone() and populate the clone using a forEach on segments, and push back all the clones into the html body. Is this workable in backbone, how would you do it? (I'm able to do this without backbone.js, but would like to see how I can improve with backbone.js, and bind all the data on the clones to model changes)
var OfferView = Backbone.View.extend({
initialize: function () {
this.model = new Offers();
this.model.fetch({
success: function (collection, response) {
console.log(response);
}
});
this.model.on('change', this.modelChange);
this.model.on('change', this.render);
this.modelChange = function () {
alert('model changed');
};
},
render: function () {
}
});
Edit 2
I'm up to creating individual views through a forEach but am having trouble inserting these back into the DOM. What am I doing wrong? (Not sure around the return this part)
// DEFINE VIEW
var OfferView = Backbone.View.extend({
initialize: function () {
this.model = new Offers();
this.model.fetch();
this.model.on('change', this.modelChange);
this.model.on('change', this.render);
this.modelChange = function () {
alert('model changed');
};
this.render();
},
render: function () {
var self = this;
this.model.forEach(function (s) {
var view = new OfferMarketView({
id: "container" + s.get('name').toLowerCase().replace(/\s*/g, '')
});
$('#leftCol').append(view.el);
});
return this;
}
});
var OfferMarketView = Backbone.View.extend({
tagName: "div",
className: "marketContainer",
events: {},
render: function() {
}
});
Whenever you call fetch on a model the response is passed through a parse method that can be defined in your model. parse takes one parameter, the ajax response:
parse: function(response) {
}
In that function you can do whatever you want with the data that comes back from your ajax request and eventually return that object. The object returned by the parse method will be set on your model.
For event binding, you'll want to do that in your view. In the initialize method of your view you can do something like:
this.collection.on("change", this.someFunction);
Now, any time something causes that model to trigger its change event someFunction ( also defined in your view ) will run.
EDIT
The sample json you added to the question looks to be pretty normalized. With that data, I'd be fetching it into a collection. If that's the structure you want your models to look like then you don't need to do much parsing.
in you collection file if you create a parse method that does the following:
parse: function(response) {
return response.segments;
}
When you call your fetch, this.collection.fetch() on a successful request, your collection will be filled with models that contain attributes in a structure that matches your response.
EDIT 2
Your binding looks ok.
in this section of code:
this.collection.fetch({
success: function (model, attributes) {
initAll(attributes);
// populate ui with attributes from model
}
})
The parameters that are passed back on a success in a collection fetch are (collection, response) collection is the result of collection call and what this.collection will end up being. response is the response of your ajax request.
I'm not sure what initAll(attributes) is supposed to be doing. If you add a parse method like I posted above, your collection will contain a set of models with the attributes of each segment.
Also, rather than calling this.render() at the end, you could do bind render to the change event:
this.collection.on('change', this.render);
That way any time your collection changes, that view will automatically render again so your changes will show up.
So far i have the following code, but it doesn't seem to be working, and I don't know when the asynchronous fetch is completed:
var item = Backbone.Model.extend({
defaults: {
id: 0,
an_id: 0,
strval: null,
th_id: 0,
text: null
},
url: 'page.php',
options: {
success: function(data) {
alert('s: ' + dump(data));
// the dump function is my way of dumping objects into a string,
// use console.log if you want, as I have that disabled
},
error: function(x, t, e) {
alert('e: ' + t + ', ' + e);
}
}
});
var coll = Backbone.Collection.extend({
model: item
});
var options = new Options();
Backbone.sync("create", coll, item.options); // 'undefined' is not an object (evaluating c.url) in backbone-min.js
Update
I have modified the original code to what I have now, and the backend can now tell the difference between New, Update, Save and Delete requests.
I still cannot find out how to populate the collection coll.
Backbone.Collection is for keeping multiple items - you seem to be trying to have your Collection "inherit" from your model, which isn't the right approach.
Collections are ordered sets of models. You can bind "change" events
to be notified when any model in the collection has been modified,
listen for "add" and "remove" events, fetch the collection from the
server, and use a full suite of Underscore.js methods.
you can add a success handler to your fetch call. try this:
coll.fetch({
success: function() {
alert("success");
console.log(coll.toJSON());
},
error: function(){
alert("error")}
});