How can I run the same setup function on every view?

Question

Many of the views in my application need to be "collapsible". To the user this means that you can click an arrow to collapse or expand the view's contents.

When creating a view I need to be able to easily say, "This view should be collapsible," and then run the appropriate setup code (which essentially means adding the .collapsible class to the view's wrapper and inserting a dom element that looks like this: <div class="toggle"></div>

Suggestions on ways to pull this off seamlessly? I'm currently using Backbone, Backbone.Marionette, and Underscore.

I do this with another application that doesn't use Backbone. In that application every action results in a page refresh, so I just use jQuery to look for all elements with the .collapsible class and do my setup that way.

EDIT:

I'm using Backbone.Marionette.CompositeView for these particular views, if that helps.

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

I've done similar thing in my project by extracting such functionality into mixins. There're different approaches to implementing mixins in Backbone. Take a look here or here

edited May 23 '17 at 11:43

Community

1
1

answered May 25 '13 at 20:40

Alexander Lebedev

5,968
1
20
30

score 0 · Answer 2 · answered May 25 '13 at 21:11

You can create parent view that extends from Marionettes compositeView and add your common functionallity there, and have your project views extend from this parent view.

var CollapsibleView = Backbone.Marionette.CompositeView.extends({
   variable1: 1,
   var2: true,
   initialize : function() {
      // your code here
   },
   helperfunction : function () {
     // other helpful function
   }

});

var MySpecificView = CollapsibleView.extends({
mySpecificFunction : function () {
 // some specificView functionality
}


});

var myProjectView= new MySpecifcView();

 myProjectView.helperfunction(); /// function from the parent
 myProjectView.mySpecificFunction();  /// function from the specificView
                                            /// you also have the functionality added on the initialization of the collpasibleView

How can I run the same setup function on every view?

2 Answers2