BackboneJS - Les variables de tableau de classe de vue sont conservées après la réinstanciation

Question

Je rencontre un scénario/un bug que je ne peux pas expliquer, car j'ai une classe de vue Backbone avec une variable de tableau, mais la valeur de la variable persiste même après que je l'ai réinstanciée. La vue backbone a la configuration suivante :

var TestView = Backbone.View.extend({
    a:"",
    b:"",
    items:[],
    initialize:function(){

    },
    add:function(value){
        this.items.push(value);
    }
});

Voici comment j'instancie la classe :

this.formView = new TestView();
this.formView.add('halo');
this.formView.a = 'abc';

this.formView = new TestView();
this.formView.add('test');
this.formView.b = 'bcd';

console.log("a - " + this.formView.a);
console.log("b - " + this.formView.b);
console.log("items - ");
console.log(this.formView.items);

Résultat :

a -  
b - bcd 
items -  ["halo", "test"] 

Étonnamment, la variable de tableau 'items' persiste et montre à la fois ['halo','test']. Mais pas pour les variables normales.

Voici le lien JsFiddle link.

Il est possible de résoudre ce problème en effaçant le tableau dans la fonction d'initialisation.

    initialize:function(){
      this.items = [];  
    },

Mais j'aimerais savoir s'il s'agit d'un bug ou si j'ai mal compris quelque chose.

Answer 1

Eh bien, le problème est délicat mais il a une explication.

Tout d'abord, ce n'est pas une bonne idée de définir des variables d'instance dans un contexte de classe et c'est ce que vous faites avec ceci :

var TestView = Backbone.View.extend({
  a: "",
  b: "",
  items: []
});

C'est l'une des raisons pour lesquelles Model.defaults existe. Vous devriez plutôt faire cela :

var TestView = Backbone.View.extend({
  initialize: function(){
    this.a = "";
    this.b = "";
    this.items = [];
  }
});

Ce qui se passe dans votre code d'exemple, c'est que toutes les nouvelles références de TestView partageront les mêmes instances de String et Array. C'est parce que changer le tableau dans une instance se répercute sur l'autre instance.

La chose la plus délicate, et vous avez été agile pour l'observer, c'est que cela ne semble pas se produire avec les chaînes, mais en réalité, c'est le cas.

Ce qui se passe, c'est que lorsque vous faites ceci :

this.formView.a = 'abc';

Vous ne transformez pas l'instance de String mais la remplacez par une nouvelle, de sorte que l'instance de String originale reste intacte.

J'aimerais offrir un exemple de manipulation de la chaîne dans une instance de TestView et voir les changements se refléter dans l'autre instance de TestView, mais je n'ai trouvé aucune méthode de chaîne JS qui manipule la chaîne sur place.