Having a static variable in Backbone js views

Question

I am new to Backbone.js. I have this project where there is a hierarchy of multiple views and sometimes the views need to communicate with each other. After a little research on the Internet, I came across https://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ and tried to use the event aggregator.

However, it didn't work. My guess is that the 'vent' is not the same instance across all the views. So, if there is any way to definine it as a static variable, I can probably make it work. So, is there a way to define static variables in Backbone.js?

The concept of static variables from Class based object oriented languages does not have a simple translation in javascript world and a similar result can be achieved via closures etc - [static-variables-in-javascript](http://stackoverflow.com/questions/1535631/static-variables-in-javascript). — Akshad, Aug 20 '15 at 02:41
Several patterns and frameworks exist for communicating between Backbone views e.g. a good framework for messaging is [Backbone.Radio](https://github.com/marionettejs/backbone.radio). If you can post some code of what you're trying we can suggest options. — Akshad, Aug 20 '15 at 02:49

score 4 · Answer 1 · answered Sep 28 '15 at 10:01

Yes, it is possible to add static variables to any Backbone objects using extend:

obj.extend( protoProps, staticProps );

e.g.:

var MyView = Backbone.View.extend( { events: ... }, {
    myStaticVar: 'anything'
} );
...
var value = MyView.myStaticVar;

However, I am not sure you need this in this case.

score 0 · Answer 2 · answered Sep 16 '15 at 07:19

Let's see. Not quite sure what was that example you showed, daga (but - Japanese version) if you want to make a static something in Bb.js(Backbone.js) u'll have to use some tricks.

For example you got a list of bb.views:

[Code #01]

01|var ViewX01 = Backbone.View.extend({
02|    initialize: function(){
03|        console.log('ViewX01');
04|        this.addToList();
05|    },
06|    addToList : function(){
07|        ViewStaticStyle.elEventos.push(this);
08|        console.log('Push #1: ', ViewStaticStyle.elEventos);
09|    }
10|});
11|var ViewX02 = Backbone.View.extend({
12|    initialize: function(){
13|        console.log('ViewX02');
14|        this.addToList();
15|    },
16|    addToList : function(){
17|        ViewStaticStyle.elEventos.push(this);
18|        console.log('Push #2: ', ViewStaticStyle.elEventos);
19|    }
20|});
21|var ViewX03 = Backbone.View.extend({
22|    initialize: function(){
23|        console.log('ViewX03');
24|        this.addToList();
25|    },
26|    addToList : function(){
27|        ViewStaticStyle.elEventos.push(this);
28|        console.log('Push #3: ', ViewStaticStyle.elEventos);
29|    }
30|});
31|var ViewX04 = Backbone.View.extend({
32|    initialize: function(){
33|        console.log('ViewX04');
34|        this.addToList();
35|    },
36|    addToList : function(){
37|        ViewStaticStyle.elEventos.push(this);
38|        console.log('Push #4: ', ViewStaticStyle.elEventos);
39|    }
40|});

A view/model that will imitate a static variable upon initialization:

[Code #02]

01|var ViewStaticStyle = Backbone.View.extend({
02|    initialize: function(){
03|        console.log('Init static variable');
04|        ViewStaticStyle.elEventos = []; // <- This one is a static array ;)
05|    }
06|});

And a master view that inits them all except for "ViewStaticStyle":

[Code #03]

01|var MasterView = Backbone.View.extend({
02|    initialize: function(){
03|        // Instantiate each and store inside the MasterView 
04|        this.view1 = new ViewX01();
05|        this.view2 = new ViewX02();
06|        this.view3 = new ViewX03();
07|        this.view4 = new ViewX04();
08|    }
09|});

Then upon $(document).ready():

[Code #04]

01|// Instantiate the static array
02|var Eventitoz = new ViewStaticStyle();
03|// Instantiate the MasterView, add it to the window in case you 
04|// want to test the "static" thing further via browser console ;)
05|window.App = new MasterView();

So the [Code 02] Line [04] Is the "static" thing.
Hope it helped.
A source code would be provided upon request.

Having a static variable in Backbone js views

2 Answers2