Question

I’m trying to pass a paginated collection (backbone.paginator plugin) to multiple views so it’s shared and I can call functions of my three views using the same collection.

However, my main view (AttendeesView) which is calling other views (PaginationBarView and AttendeeView per pages).
I tryed to pass it by the constructor of my views, by the router.
I can’t seem to make it work so I’d need an idea so I could work on it.

EDIT : By the way, the error I get is Uncaught TypeError: Cannot call method 'on' of undefined on my PaginatedBar when I try to add an event to my collection. It’s not found.

AttendeesCollection (Paginated)

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

You’re creating the PagniationBarView in the view definition, before this.collection exists. I’d suggest moving it into 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;