Backbone.js - Get matrice JSON in vista modello

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

i dati del modello è stato interrogato e gli attributi di livello principale funziona bene, ma l'attributo che contiene una serie di altri oggetti non sembra presentarsi.

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> 

ritorno JSON:

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

Sembra quasi che non sta vedendo i .friends attribuiscono a tutti perché si sta prendendo le impostazioni predefinite del modello ([ ]).

Qualche suggerimento?

Answer 1

Si sta chiamando render() prima che fetch() abbia restituito i dati dal server.

Prova questo?

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