How to fetch data from Backbone collection to Template

问题

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

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/22889486/how-to-fetch-data-from-backbone-collection-to-template

标签

javascript

backbone.js

underscore.js

underscore.js-templating