How to retrieve data from the Backbone collection to the model

advertisements

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>
        <html>
           <head>
              <title>Backbone tutorial</title>
           </head>
           <body>
              <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>

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

This is my Collection code

                  var Album = Backbone.Collection.extend({

                    url : "/data.json"
                  });

This is my view code

                 var UserList= Backbone.View.extend({
                    el:'.page',
                    template:_.template($('#user-list-template').html()),
                    render : function(){
                        var that=this;
                        var album= new Album();
                        album.fetch({
                            success:function(album){

                                var _data = {data : album.models} ;

                                $(that.el).html(that.template(_data));
                            }
                        })

                    }

                 });

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(){
                    userList.render();
                 });

                 Backbone.history.start();
              </script>
           </body>
        </html>

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"}]