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是你的朋友。}