Backbone.js vue imbriquée ne pas rendre les données

Question

J'essaie d'apprendre les vues imbriquées avec Backbone.js et j'ai rencontré un problème. Aucune erreur n'est levée cependant, il n'affiche aucune sortie ou donnée. Toute aide serait très appréciée. V/R Chris

lien

à jsFiddle: http://jsfiddle.net/cpeele00/PcmMW/8/

var User = Backbone.Model.extend({}); 

var Users = Backbone.Collection.extend({ 
    model: User 
}); 

var UserItemView = Backbone.View.extend({ 
    tagName: 'li', 
    template: _.template($('#user-list-template').html()), 
    render: function() { 
     this.$el.html(this.model.toJSON()); 
     return this; 
    } 
}); 

var UserListView = Backbone.View.extend({ 

    render: function() { 
     this.$el.empty(); 
     var self = this; 
     this.collection.each(function(model) { 
      self.renderItem(model); 
     }); 
    }, 

    renderItem: function(item) { 
     var itemView = new UserItemView({ 
      model: item 
     }); 

     this.$el.append(itemView.render().el); 
    } 

}); 

var user1 = new User(); 
user1.set({ 
    firstname: 'momo', 
    lastname: 'peele' 
}); 

var user2 = new User(); 
user2.set({ 
    firstname: 'bobo', 
    lastname: 'peele' 
}); 

var users = new Users([user1, user2]); 

var listView = new UserListView({ 
    collection: users 
}); 
listView.render(); 

Voici le balisage HTML et modèle

<div id="user-list"> 
    <fieldset> 
    <legend>Users</legend> 
    <ul></uL> 
    </fieldset> 
</div> 

<script id="user-list-template" type="text/template"> 
    <%= firstname %> 
    <%= lastname %> 
</script> 

Answer 1

Il semble y avoir deux problèmes:

En premier lieu, faute de frappe dans UserItemView: vous n'utilisez pas le modèle, juste en ajoutant JSON. Au lieu de

this.$el.html(this.model.toJSON());` 

il devrait être

this.$el.html(this.template(this.model.toJSON())); 

En second lieu, le UserListView n'est pas attaché au DOM partout, donc quand il est « rendu », il ne semble pas. J'ai ajouté

el: $("#user-list ul") 

à la vue, de sorte que le rendu ajoute les éléments de sous-vue à un élément qui se trouve réellement dans le DOM.

Forked Fiddle

_{PS, Firebug est votre ami.}