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

在PagniationBarView存在之前，您正在视图定义中创建this.collection。我建议将其移至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;

将集合传递给多个视图

1 个答案: