Server needs to return a JSON array of model object for collection.fetch() request. So the data.json should look like this:
[{"key":"value to print on template"},{"key":"another value"}]
And try this collection view render implementation:
Model:
var User = new Backbone.Model.extend({});
Collection:
var Album = new Backbone.Collection.extend({
model: User,
url: "/data.json"
});
//create collection instance
var album = new Album();
View:
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
initialize: function(){
//register a collection data add event handler
this.listenTo(album,"add",this.addUser);
//register a collection data remove event handler
this.listenTo(album,"remove",this.removeUser);
album.fetch();
},
render : function(){
},
addUser: function(user){ //apply model data to view template and append to view element
this.$el.append(this.template(user.toJSON()));
},
removeUser: function(user){
//view state update implementation when data have been removed from collection
}
});
Template:
<script type="text/template" id="user-list-template">
<h1><%= key %></h1>
</script>
div.user view will add/remove user-list view dynamically according to collection data manipulation.
Hope this helpful.