parsing + backbonejs - backbone.js

Question

how to parse the response value..
i want to get the json value from the json value....but get problem in parsing....
var ListView = Backbone.View.extend({
el: '#app-container',
initialize: function() {
_.bindAll(this,"render");
console.log('ListView init.');
this.counter = 0;
this.collection = new FieldCollection();
this.collection;
this.render(this.collection);
},
events: {
'click #add': 'addItem'
},
render: function(val) {
console.log(val);
console.log('Render called.');
},
});
my json is as follow...
[
{
"name": "qqqqqqqqqqqqqqqqqqq",
"img": "qqqqqqqqqqqqqqqqqqqq"
},
{
"name": "eeeeeeeeeeeeeeeeeee",
"img": "eeeeeeeeeeeeeeeeeee"
},
{
"name": "ggggggggggggggggggg",
"img": "gggggggggggggggggggg"
}
]
my question is that how to parse the response value...
how to access the json value in the view...
var FieldCollection = Backbone.Collection.extend({
defaults: {
model: Field
},
model: Field,
url: 'http://localhost:8080/backbonejs/myjsoncollection.json',
initialize: function() {
console.log('FieldCollection init.');
},
parse: function(response) {
console.log(response);
return response;
}
});
this is the whole code...
$(function(){
var Field = Backbone.Model.extend({
defaults: {
name: "shaleen",
img: "not found",
},
initialize: function() {
// console.log(this.attributes.name);
}
});
var FieldCollection = Backbone.Collection.extend({
defaults: {
model: Field
},
model: Field,
url: 'http://localhost:8080/backbonejs/myjsoncollection.json',
initialize: function() {
console.log('FieldCollection init.');
},
/* parse: function(response) {
console.log(response);
return response;
}*/
});
var ListView = Backbone.View.extend({
el: '#app-container',
initialize: function() {
_.bindAll(this,"render");
console.log('ListView init.');
this.counter = 0;
var jsonfield = new FieldCollection();
jsonfield.fetch();
this.render(jsonfield);
},
render:function(collection){
_.each(collection, function(model){
console.log(model.get('name'));
});
_.each(function(model){
console.log(model.get('name'));
console.log(model.get('img'));
},this);
}
});
var listView = new ListView();
});

Answer 1

The parse function is optional, you only need to implement it, if anything special should happen after you receive the data from the server. To isolate possible sources of errors, I would simplify your approach first by not connecting to your server. Please run the following code:
var Field = Backbone.Model.extend({});
var FieldCollection = Backbone.Collection.extend({
model: Field,
});
var ListView = Backbone.View.extend({
el: '#app-container',
initialize: function() {
this.collection = new FieldCollection();
this.collection.add([{name:'name1',img:'img1'},{name:'name2',img:'img2'}]);
this.render(this.collection);
},
render(collection){
collection.each(function(model){
console.log(model.get('name')+' '+model.get('img'));
},this);
});
If this works, apply the following 2 changes:
Change the collection to include the url:
var FieldCollection = Backbone.Collection.extend({
model: Field,
url='http://localhost:8080/backbonejs/myjsoncollection.json'
});
Change the initialize function of the View to do the fetch:
initialize: function() {
this.collection = new FieldCollection();
this.collection.fetch();
this.render(this.collection);
},
Please run the simplified version first, if that works the extended version.