BackboneJs fetch() Json to display on View - json

Question

I am trying to use backbonejs to fetch() JSON data that sent from server to display it in a view. But it doesn't work.
Here is my backbonejs
$(function () {
var Service = Backbone.Model.extend({
url: "/api/album/1",
defaults: {
id: '1',
title: 'abc',
article: 'abc'
},
parse: function (response) {
return response.data;
}
});
// Create a collection of services
var ServiceList = Backbone.Collection.extend({
// Will hold objects of the Service model
url: "/api/album/1",
model: Service
});
var ServiceView = Backbone.View.extend({
tagName: 'li',
events: {
'click': 'toggleService'
},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function () {
this.$el.html('<input type="checkbox" value="1" name="' + this.model.get('title') + '" /> ' + this.model.get('title') + '<span>$' + this.model.get('artist') + '</span>');
this.$('input').prop('checked', this.model.get('checked'));
return this;
},
toggleService: function () {
this.model.toggle();
}
});
var App = Backbone.View.extend({
model: Service,
el: $('#main'),
initialize: function () {
this.model = new ServiceList();
this.model.fetch();
this.list = $('#services');
this.model.each(function (service) {
var view = new ServiceView({model: service});
this.list.append(view.render().el);
}, this);
},
render: function () {
return this;
}
});
new App();
});
Here is my JSON
{"data":{"id":"1","artist":"Gotye","title":"Making Mirrors"}}
Please ignore my bad naming convention in the backbonejs, i am trying to make it work

Answer 1

Try this
var App = Backbone.View.extend({
el: $('#main'),
initialize: function() {
var serviceList = new ServiceList(),
// if you don't have #services in html
//services = $(this.el).html('<div id="services"></div>'),
services = $(this.el).find('#services'),
serviceView;
serviceList.fetch({
success: function(collection) {
collection.each(function(model) {
serviceView = new ServiceView({
model: model
});
services.append(serviceView.render().el);
});
}
});
},
render: function() {
return this;
}
});
DEMO: http://jsbin.com/hiziqi/1/ in this demo I changed url to remote server