Nested models in Backbone - backbone.js

Question

I am new to Backbone and I have an issue regarding nested models. Here I have data.json where I have following JSON:
[
{
"name": "Project",
"description" : "This is a Peugeot website",
"url" : "http://peugeot.am",
"images" : [
{ "image" : "A", "thumb" : "a" },
{ "image" : "B", "thumb" : "b" },
{ "image" : "C", "thumb" : "c" }
]
},
{
"name" : "Ararat",
"description" : "This is a Ararat website",
"url" : "http://ararat.am",
"images" : [
{ "image" : "A", "thumb" : "a" },
{ "image" : "B", "thumb" : "b" },
{ "image" : "C", "thumb" : "c" }
]
},
{
"name" : "Procredit Bank",
"description" : "This is a Procredit Bank website",
"url" : "http://procredit.am",
"images" : [
{ "image" : "A", "thumb" : "a" },
{ "image" : "B", "thumb" : "b" },
{ "image" : "C", "thumb" : "c" }
]
}
]
In Backbone I am trying to fetch data, but I get empty array.
var myapp = myapp || {};
$(function () {
myapp.Image= Backbone.Model.extend({
initialize: function () {
this.Img = this.get('image');
this.Thumb = this.get('thumb');
}
});
myapp.Images= Backbone.Collection.extend({ model: myapp.Image });
myapp.Item= Backbone.Model.extend({
initialize: function () {
this.Name = this.get('name');
this.Description = this.get('description');
this.URL = this.get('url');
this.subs = new myapp.Images(this.get('images'));
}
});
myapp.Items= Backbone.Collection.extend({
model: myapp.Item,
url: 'content/js/data.json',
parse: function (resp, xhr) { return JSON.parse(resp); }
});
var items = new myapp.Items();
items.fetch();
console.log(items.toJSON());
});
Now, what am I doing wrong above? I need to fetch data to get JSON so to start manipulate with it.
Thanks in advance!

Answer 1

the default support is pretty lacking you would need to get the data for each nested model separately
There are library such as
https://github.com/powmedia/backbone-deep-model
and
http://afeld.github.io/backbone-nested/
Which can be used instead

Answer 2

items.fetch();
console.log(items.toJSON());
Collection.fetch() is an asynchronous operation. It won't produce a response until the request gets back from the server. Try this:
items.fetch().done(function(){
console.log(items.toJSON());
});
You can also use the web inspector in safari/chrome (or firefox debugger / firebug) to monitor network requests and see that your calls are firing successfully (and inspect the responses), or put another console.log statement inside the 'parse' function of your collection.
http://backbonejs.org/#Collection-fetch