无法在页面上显示Todo Collection

我练习Backbone JS,下面是代码Iam在页面上显示Todo Collection。 但我不明白下面的代码出了什么问题,最后什么都没显示。 顺便说一下,我能够从服务器和控制台日志中获取数据,显示正确的数据,但只是不显示在页面上。 看起来像我之前的渲染调用,而不是从服务器获取数据,但不知道为什么会发生这种情况。

这是代码,请问我出了什么问题?

     
var TodoItem = Backbone.Model.extend({ urlRoot: 'api', }) var TodoCollection = Backbone.Collection.extend({ model: TodoItem, url: 'api/todos' }) var TodoView = Backbone.View.extend({ template: _.template('

' +'<input type=checkbox ' +'/>' +'

'), render: function(){ this.$el.html(this.template(this.model.toJSON())); return this; } }) var TodoListView = Backbone.View.extend({ initialize: function(){ this.listenTo(this.collection,'reset',this.render); this.collection.fetch({reset:true}); }, render: function(){ console.log(this.collection.length); this.collection.forEach(this.addOne,this); }, addOne: function(todoItem){ console.log(todoItem.get('description')); var todoView = new TodoView({model: todoItem}); this.$el.append(todoView.render()); } }); var todoItem = new TodoItem() var todoList = new TodoCollection() var todoListView = new TodoListView({el: '#demo', collection: todoList})

问题是你要附加从视图返回的内容。你必须将视图附加到DOM

 this.$el.append(todoView.render().el);