骨干多次检索数据

时间:2016-05-13 06:35:42

标签: backbone.js firebase

当我在console.log中输入以下代码时,我发现收集的值是两次检索的。例如,如果保存了2条记录,那么它将被提取4次,对于3条记录,它将被提取9次。这与僵尸视图有关吗?我认为他们已经修复了这个.listenTo。

的介绍
render: function() {
        console.log("inside render");
        var self = this;
        this.model_date = $("#date").val();
        this.dateUrl = "https://xxxxx.firebaseio.com/" + this.model_date.replace(/\//g, '');
        //create an instance of the collection constructor FoodCollection with the current date
        this.foodCollection = new app.FoodCollection([], { url: this.dateUrl });
        this.listenTo(this.foodCollection, 'add', this.render);
        this.$list.html('');

        //this part is executed multiple times based on the number of records saved.

        this.foodCollection.each(function(food) {
            console.log("iterating over foodCollection");
            var view = new app.FoodRecords({ model: food });
            self.$list.append(view.render().el);
        });
    },

    //called when an item is added and the add-food button is clicked
    addFood: function() {
        console.log("inside addFood");
        if (this.$input.val() == '') {
            return;
        };
        this.foodCollection.create(this.newAttributes());
        this.$input.val('');

    },

1 个答案:

答案 0 :(得分:0)

主要问题是你有一个监听器在render方法本身内调用render。因此,每次调用渲染时,都会添加新的侦听器,从而增加下次将某些内容添加到集合时调用的时间。

您应该确保只添加一次侦听器。通常这是在initialize回调中完成的。

下一个问题是你的整个逻辑。每次调用渲染时,都会创建一个空集合?逐步完成代码,看看与您打算做的相比,您的代码实际上在做什么。如果您避免清空集合,那么您真的想要在添加新模型时迭代集合并为所有现有模型创建新视图吗?我不这么认为。

您的代码应该是这样的:

  • 抓取集合。
  • 获取后,通过迭代集合并渲染每个模型的项目视图并附加到集合视图来渲染集合视图。
  • 添加新模型时,渲染项目视图并附加到集合。没有迭代,没有重置和东西。

如何做这些步骤已经在互联网上发布了数百次,所以我不再写了。