How to retrieve data from the Backbone collection to the model


i am just writing a simple backbone program. But i am not getting how to fetch data from backbone collection to backbone template. Complete code is written below:

        <!doctype html>
              <title>Backbone tutorial</title>
              <div class="user">user</div>
              <div class="page"></div>

              <script type="text/template" id="user-list-template">

I am not able to get data on daya.key

                <h1> <%= data.key %> </h1>


              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript" src="underscore.js"></script>
              <script type="text/javascript" src="backbone.js"></script>

This is my Collection code

                  var Album = Backbone.Collection.extend({

                    url : "/data.json"

This is my view code

                 var UserList= Backbone.View.extend({
                    render : function(){
                        var that=this;
                        var album= new Album();

                                var _data = {data : album.models} ;




This is my Router code

                 var Router = Backbone.Router.extend({
                    routes: {
                        "":                 "home"   // #help


                 var userList= new UserList();
                 var router = new Router();

                 router.on('route:home', function(){


and here is the data.json file

{ "key" : "value to print on template "}

Two modifications i would suggest

1.First check the data feild in your template. Since you are fetching data from the collection it will be array of models.

<h1> <%= data[0].key %> </h1>

or you can use a for loop iterating over the collections

2.The data.json file should look like this

[{"key" : "value"}]