将集合传递给多个视图

Question

我正在尝试将分页集合（backbone.paginator 插件）传递给多个视图，以便共享它，并且我可以使用同一个集合调用我的三个视图的函数。

但是，我的主视图 (AttendeesView) 正在调用其他视图（PaginationBarView 和 AttendeeView 每页）。 我试图通过我的视图的构造函数通过路由器传递它。 我似乎无法让它发挥作用，所以我需要一个想法，这样我才能继续努力。

编辑：顺便说一句，当我尝试将事件添加到我的收藏时，我在 PaginatedBar 上得到的错误是 Uncaught TypeError: Cannot call method 'on' of undefined。没找到。

AttendeesCollection（分页）

define([
    'jQuery',
    'Underscore',
    'Backbone',
    'models/AttendeeModel',
    'libs/plugins/backbone.paginator'
],function($, _, Backbone, Attendee,Paginator){
    var AttendeesCollection = Paginator.requestPager.extend({
        model: Attendee,
        ... (Works)
    return AttendeesCollection;
});

---

define([
    'jQuery',
    'Underscore',
    'Backbone',
    'libs/plugins/bootstrap-dropdown',
    'text!templates/PaginationBar.phtml'
],function($, _, Backbone, twdd, PaginationBarTPL){
    var PaginationBar = Backbone.View.extend({
        events: {
            'click a.PBNext': 'nextResultPage',
            'click a.PBPrev': 'previousResultPage',
            'click a.PBSort': 'updateSortBy',
            'click a.PBPage': 'gotoPage'
        },
        initialize: function(){
            _.bindAll(this,'render','updateSortBy','nextResultPage', 'previousResultPage', 'gotoPage');
            this.collection.on('reset', this.render, this);
            this.collection.on('change', this.render, this);
        }
            (...)
    });
    return PaginationBar;
});

---

define([
    'jQuery',
    'Underscore',
    'Backbone',
    'facade',
    'views/PaginationBarView',
    'text!templates/attendees.phtml',
    'collections/AttendeesCollection'
],function($, _, Backbone,facade,PaginationBarView,AttendeesTPL,AttendeesCollection){
    var AttendeesView = Backbone.View.extend({

        el: "#attendees",
        collection: new AttendeesCollection,
        paginationbar: new PaginationBarView({collection: this.collection}),

        initialize: function(){

            _.bindAll(this, 'render', 'onClose');

            $(this.el).find(".paginationBar").append(this.paginationbar.render().el)
            this.collection.on('change', this.addAll, this);
            this.collection.on('reset', this.addAll, this);
            this.collection.on('add', this.addOne, this);
            this.collection.pager();
        },
              (...)
    });
    return AttendeesView;
});

Answer 1

在this.collection 存在之前，您正在视图定义中创建PagniationBarView。我建议将其移至 initialize():

var AttendeesView = Backbone.View.extend({

    el: "#attendees",
    collection: new AttendeesCollection,
    paginationbar: null, // Do not create the view here

    initialize: function(){

        _.bindAll(this, 'render', 'onClose');

        // Create the view here now that this.collection exists
        this.paginationbar = new PaginationBarView({collection: this.collection});

        // ...

    }
});
return AttendeesView;