Question

Iam学习Backbone JS，Iam试图显示TodosList，但没有渲染。但是，我可以从服务器获取收集数据。

您能告诉我以下代码出了什么问题。

以下是代码：

<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({
    initialize: function(){
        this.listenTo(this.collection,'fetch',this.render)
        this.collection.fetch()
    },
    render: function(){
        this.collection.forEach(this.addOne,this)
    },
    addOne: function(todoItem){
        console.log(todoItem.get('status'))
    }

})


var todoItem = new TodoItem()
var todoList = new TodoCollection()

var todoView = new TodoView({el: '#demo', collection: todoList})

todoView.render()

console.log(todoView.el)


</script>

</body>

</html>

而且我也不确定是否会取得＆＃39;是预先定义的事件？何时使用＆＃39;重置＆＃39;活动，何时使用＆＃39; fetch＆＃39;事件？他们看起来都和我差不多。

Answer 1

没有'fetch' event因此您的listenTo没有做任何有用的事情。通常，当您fetch时，您将重置整个集合：

this.collection.fetch({ reset: true });

然后收听'reset'事件：

this.listenTo(this.collection, 'reset', this.render);

reset:true的{{1}}选项告诉fetch在一次操作中用收集的数据完全替换集合的内容;然后，当fetch全部完成后，该集合将触发'reset'事件，并且您的听众会将其转换为fetch来电。

您的render应该更像：

initialize

无法在浏览器中显示TodoList视图

1 个答案: