Backbone View extends is polluted

Question

I have a view that represents a modal. This view has some attributes, like the footer extra class. I'm having a trouble that, when some modal change it's value, all of them receive the same attribute.

This is the example:

var ModalView = AlertingView.extend({
    className : "modal",
    paramsTemplate: { footerClass: "" }   
});

After that, I used the modal that has the changed attribute.

SpecialModal = ModalView.extends({
    initialize: function() {
       this.paramsTemplate.footerClass = "white";
    } 
})

So, if I instanciate a normal Modal, this parameter is set! :'(

NormalModal = ModalView.extends({
    initialize: function() {
       console.log(this.paramsTemplate.footerClass);//shows 'white'!
    } 
})

Do you have any idea of how solving it? thanks!

what is AlertingView? it seems working fine here http://jsfiddle.net/JQu5Q/9/ — StateLess, Dec 17 '14 at 11:13
Could you please show how you are constructing the views, that is, what parameters are you're passing into your views when you first instantiate them? — seebiscuit, Dec 17 '14 at 12:07
@aktiv-coder the fiddle works fine, because the class variable is not changed, this one here demonstrates the problem - http://jsfiddle.net/JQu5Q/11/ — coding_idiot, Dec 18 '14 at 09:38

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

http://jsfiddle.net/JQu5Q/11/

This fiddle demonstrates your problem.

As long as you've not created any instance of SpecialModal every instance of NormalModal works.

This is because paramsTemplate is a class variable, not an instance variable. As soon as an instance of SpecialModal is created, it updates the classVariable and hence, all objects reflect that change.

Fortunately, I've just had a similar issue few days back Backbone.js view instance variables?

Solution :

http://jsfiddle.net/JQu5Q/12/

var ModalView = Backbone.View.extend({
    className : "modal",
    initialize:function(){
        this.paramsTemplate= { footerClass: "" }   ;
    }
});
SpecialModal = ModalView.extend({
    initialize: function() {
       ModalView.prototype.initialize.call(this);
       this.paramsTemplate.footerClass = "white";
        console.log(this.paramsTemplate.footerClass);
    } 
})
NormalModal = ModalView.extend({
    initialize: function() {
        ModalView.prototype.initialize.call(this);
       console.log(this.paramsTemplate.footerClass);
    } 
})

Not quite. `paramsTemplate` is an instance variable (or at least the JavaScript equivalent). If it was a "class variable" you'd say `ModelView.paramsTemplate` to access it and you'd define it in the *second* argument to `Backbone.View.extend`. The problem is the `paramsTemplate` is attached to the prototype is it is shared by all instances, assigning it in `initialize` attaches it to the instance rather then the prototype. This is a standard "don't put mutable data in the prototype" problem. — mu is too short, Dec 18 '14 at 21:12

Backbone View extends is polluted

1 Answers1

Linked

Related