Question

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

我有一些骨干集合：

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。这怎么可能？我做错了什么？

Answer 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引用集合。

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

Answer 2

如果代码的结构如下，问题就解决了。有必要将参数重置添加到fetch。

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;

    }

});

主干收集长度错误。不能每个这个集合

2 个答案: