错误的主干集合长度。不能每个这个集合答案

【问题标题】：Wrong backbone collection length. Can't each this collection错误的主干集合长度。不能每个这个集合
【发布时间】：2016-06-24 12:04:10
【问题描述】：

对不起，我的英语不好。告诉我为什么会发生以下情况：

我有一些骨干收藏：

var Background = window.Models.Background = Backbone.Model.extend({});

var Backgrounds = window.Models.Backgrounds = Backbone.Collection.extend({

    model: window.Models.Background,

    url: '/backgrounds/',

    initialize: function() {

        this.fetch({
            success: this.fetchSuccess(this),
            error: this.fetchError
        });
    },

    fetchSuccess: function( collect_model ) {
        new BackgroundsView ({ collection : collect_model });
    },

    fetchError: function() {
        throw new Error("Error fetching backgrounds");
    }

});

还有一些观点：

var BackgroundsView = window.Views.BackgroundsView = Backbone.View.extend({

    tagName: 'div',

    className: 'hor_slider',

    initialize: function() {
        this.render();
    },

    render: function() {
        console.log(this.collection);
        this.collection.each( function (background) {
            console.log(background);
            //var backgroundView = new BackgroundView ({ model: background });
            //this.$el.append(backgroundView.render().el);
        });
    }

});

现在我正在创建集合

var backgrounds = new Models.Backgrounds();

但是当我必须渲染这个视图时，在对集合进行排序的过程中，它的长度是 0，但应该是 2。 This log I see at console。这怎么可能？我做错了什么？？

【问题讨论】：

为什么不让它变得更简单呢？在视图中设置一个监听器，它监听集合的变化，并为每一个变化重新渲染视图。
@MorKadosh，我试着按照你说的去做。但是我需要在集合初始化后立即创建一个“视图”。但实际上，“取”发生在代码执行的最后。在调用“fetchSuccess”的时候集合还没有准备好。

标签： javascript backbone.js collections

【解决方案1】：

您在集合获取成功之前创建视图。你的代码应该是：

initialize: function() {

    this.fetch({
        success: this.fetchSuccess,
        //------------------------^ do not invoke manually
        error: this.fetchError
    });
},
fetchSuccess: function(collection, response) {
    new BackgroundsView ({ collection : collection});
},

当获取成功时，您应该让主干调用fetchSuccess。现在您正在立即调用该函数并将返回值undefined 作为成功回调传递。

这看起来像是错误的模式。您的数据模型不应该知道/控制表示逻辑。

你有一个没有任何参考的视图。您应该创建一个带有引用的视图实例（例如从路由器，或任何启动您的应用程序的东西）并将集合传递给它。然后从它的初始化方法中获取集合，并在获取成功后渲染。收藏可以通过this.collection inside view 引用。

或者，您可以从路由器本身获取集合，然后创建视图实例。无论哪种方式，集合/模型都不应该控制视图。

【讨论】：

谢谢！诚然，这是一个非常糟糕的决定。跟踪脚本后，我意识到 fetch 发生的时间比我想要的要晚得多。我添加了选项“reset”来获取并附加到视图中的事件处理程序。集合和视图必须单独创建。这解决了我的问题。

【解决方案2】：

如果代码按以下方式构造，问题就解决了。需要添加参数重置才能获取。

var Background = window.Models.Background = Backbone.Model.extend({});

var Backgrounds = window.Models.Backgrounds = Backbone.Collection.extend({

    model: window.Models.Background,

    url: '/backgrounds/',

    initialize: function() {

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

});

var BackgroundsView = window.Views.BackgroundsView = Backbone.View.extend({

    tagName: 'div',

    className: 'hor_slider',

    initialize: function() {
        this.listenTo(this.collection, 'reset', this.render);
    },

    render: function() {

        this.collection.each( function (background) {

            var backgroundView = new BackgroundView ({ model: background });
            this.$el.append(backgroundView.render().el);

        }, this); 
        $('#view_list').empty();
        $('#view_list').append(this.$el);

        return this;

    }

});

【讨论】：