Backbone.js - Get a JSON array in a view template

Question

window.User = Backbone.Model.extend({ defaults: { name: 'Jane', friends: [] }, urlRoot: "users", initialize: function(){ this.fetch(); } }); var HomeView = Backbone.View.extend({ el: '#container', template: _.template($("#home-template").html()), render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } }); home: function() { var user = new User({id: 1}); this.homeView = new HomeView({ model: user }); this.homeView.render(); }, 

Model data is requested and root level attributes work fine, but the attribute containing an array of other objects does not seem to be displayed.

Template:

  <script id="home-template" type="text/template"> <div id="id"> <div class="name"><%= name %></div> <br /> <h3> Single Friends</h3> <br /> <ul data-role="listview" data-inset="true", data-filter="true"> <% _.each(friends, function(friend) { %> <li> <a href="/profile?id=<%= friend.id %>", data-ajax="false"> <div class="picture"><img src="http://graph.facebook.com/<%= friend.fb_user_id %>/picture"></div> <div class="name"><%= friend.name %></div> </a> </li> <% }); %> </ul> </div> </script> 

JSON Return:

 {"name":"John Smith","friends":[{"id":"1234","name":"Joe Thompson","fb_user_id":"4564"},{"id":"1235","name":"Jane Doe","fb_user_id":"4564"}]} 

It seems that he does not see the .friends attribute at all, because it accepts the default values ​​of the model ([]).

Any suggestions?

Answer 1

You call render() before fetch() returns data from the server.

Try it?

 window.User = Backbone.Model.extend({ defaults: { name: 'Jane', friends: [] }, urlRoot: "users" }); var HomeView = Backbone.View.extend({ el: '#container', template: _.template($("#home-template").html()), initialize: function() { this.model.fetch(); this.model.bind('change', this.render, this); } render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } });