Question

我开始用requirejs研究Backbone了<
p>

我在网上关注一些教程，现在我有点怀疑当我从Json打印数据打印到控制台日志太多行时，如果进入我的json有4个元素，它打印我4 * 4元素。
这是我的代码：

收集：

define(['backbone', 'models/todo'], function(Backbone, TodoModel){

    var todoCollection = Backbone.Collection.extend({
        model: TodoModel,
        url:'json/todos.json',
        parse: function(data){
            return data.result;
        }
    });

    return todoCollection;
});

应用：

define(['jquery' , 'backbone', 'views/todo', 'models/todo', 'collections/todo'], 
    function($, Backbone, TodoView, TodoModel, TodoCollection){
    var AppView = Backbone.View.extend({

        el:$('#placeholder'),

        initialize: function(){
            console.log('initialize AppView');
            this.todos = new TodoCollection();
            this.todos.bind('all',this.render, this);
            this.todos.fetch();
        },
        render: function(){
            console.log('Data is fetched');
            this.todos.each(function(model){
                console.log(model.get("content"));
            });
        }
    })

    return AppView;
});

JSON：

{
    "result":[
        {
            "content" : "Todo1"
        },
        {
            "content" : "Todo2"
        },
        {
            "content" : "Todo3"
        },
        {
            "content" : "Todo4"
        }
    ]
}

输出到控制台：

initialize AppView app.js:8
Data is fetched app.js:14
4
Initialized Todo model todo.js:7
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16

为什么有那么多线？我期待这样的输出：

initialize AppView app.js:8
Data is fetched app.js:14
4
Initialized Todo model todo.js:7
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16

我不明白这一点。有人可以解释我的错误吗？感谢

Answer 1

你的问题在这里：

this.todos.bind('all',this.render, this);

您绑定了所有事件，而这些事件又会多次调用this.render。

请改为尝试：

this.todos.bind('sync', this.render, this);

或者，更好的是：

this.todos.on('sync', this.render, this);

骨干渲染与集合

1 个答案: