Backbone.js嵌套视图不呈现数据

Question

我试图学习与Backbone.js嵌套的意见，并遇到了问题。不会抛出错误，但不会显示任何输出或数据。任何帮助将非常感激。 V/R克里斯

链接的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(); 

这里是HTML和模板标记

<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

似乎有是两个问题：

首先，错字在UserItemView：你没有使用模板，只是追加JSON。取而代之的

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

应该

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

其次，UserListView没有连接到任何地方的DOM，所以当它被“渲染”，它不会出现。我将

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

添加到视图中，以便呈现将子视图项目附加到实际在DOM中的元素。

Forked Fiddle

_{PS， Firebug是你的朋友。}