无法在页面上显示 Todo Collection

Question

我正在练习 Backbone JS，下面是我要在页面上显示 Todo Collection 的代码。但是我不明白下面的代码出了什么问题，最后什么也没显示。顺便说一句，我能够从服务器和控制台日志中获取数据也显示正确的数据，但只是不显示在页面上。似乎我的渲染调用之前不是从服务器获取数据，但不知道为什么会这样。

这是代码，请告诉我哪里出了问题？

<html>
<head>
<link rel="stylesheet"
    href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>

<body>

<div id="demo"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

<script type="text/javascript">

var TodoItem = Backbone.Model.extend({
    urlRoot: 'api',
})

var TodoCollection = Backbone.Collection.extend({
    model: TodoItem,
    url: 'api/todos'
})

var TodoView = Backbone.View.extend({
    template: _.template('<h3> ' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>/>' +' <%= description %></h3>'),
    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})

</script>

</body>

</html>

Answer 1

问题是您要附加从 view.You 返回的 this，必须将 el 视图附加到 DOM。

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

无法在页面上显示 Todo Collection

Unable to display Todo Collection on the page

javascript

jquery

backbone.js