Backbone.js - Get JSON array into 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();
      },

The model data is being queried and the root level attributes work fine, but the attribute that contains an array of other objects doesn't seem to show up.

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>

Return JSON:

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

It almost seems like it's not seeing the .friends attribute at all because it's taking the defaults of the model ([]).

Any suggestions?

Answer 1

You are calling render() before fetch() has returned the data from the server.

Try this?

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;
  }
});