I want to create a wrapper view that acts as a menu wrapper that can hold multiple different inner views, the wrappers sole purpose is to animate in and out, provide some scrolling structure and then be agnostic to the content inside. I've come up with a Scroller view which I then pass an array of views that are contained when the Scroller view gets disposed I loop the views array and dispose of each. Can anyone advise if this approach is good or what might you suggest? Should the Scroller view be independent? Do I need to attach each view contained inside or can I do something smarter? Or, should I be thinking of extending this Scroller for each new menu and have my views bounnd/nested?JS(() => {const ScrollerView = Backbone.View.extend({    className: 'anim-slide scroller',    stateClasses: {        isAnimating: 'is-animating'    },    template: Handlebars.compile($('.tmpl-scroller').html()),    offsetAllowList: ['top', 'right', 'bottom', 'left'],    initialize(options) {        this.options = options || {};        // Should probably live in a model.        if(this.options.offset && _.contains(this.offsetAllowList, this.options.offset)) {            const offsetClass = ' anim-slide--from-'.concat(this.options.offset);            this.el.className += offsetClass;        } else {            this.el.className += ' anim-slide--from-bottom';        }        this.listenTo(this, 'panel.animate:show.complete', this.onShow);        this.listenTo(this, 'panel.animate:hide.complete', this.onHide);    },    render() {        console.log('ScrollerView.render');        this.$el.html(this.template());        setTimeout(() => {this.afterRender()}, 0);        return this;    },    afterRender() {        console.log('ScrollerView.afterRender');    },    show() {        console.log('ScrollerView.show');        this.$el.addClass(this.stateClasses.isAnimating);        this.$el.one('transitionend', event => this.trigger('panel.animate:show.complete'));    },    hide() {        console.log('ScrollerView.hide');        this.$el.removeClass(this.stateClasses.isAnimating);        this.$el.one('transitionend', event => this.trigger('panel.animate:hide.complete'));    },    onShow() {        console.log('ScrollerView.onShow');    },    onHide() {        console.log('ScrollerView.onHide');        setTimeout(() => {this.dispose()}, 0);    },    dispose() {        console.log('ScrollerView.dispose');        if(this.options.childViews) {            this.options.childViews.forEach(view => view.dispose());        }        return this.remove();    }});const ContentView = Backbone.View.extend({    className: 'content',    template: Handlebars.compile($('.tmpl-content').html()),    render() {        this.$el.html(this.template());        return this;    },    dispose() {        console.log('ContentView.dispose');        return this.remove();    }});    let scrollerView = null;    // Create Scroller View    $('.js-action--show').on('click', event => {        const contentView = new ContentView();        scrollerView = new ScrollerView({            'childViews': [contentView]        });        document.body.append(scrollerView.render().el);        scrollerView.$('.js-region--scroll').html(contentView.render().el);        document.body.offsetTop;        scrollerView.show();    });    $('.js-action--hide').on('click', event => scrollerView.hide());})();Js Fiddle http://jsfiddle.net/sv14hm9c/
Backbone keep reference of inner views on parent view for disposal
javascript;backbone.js