CODEWITHSUNDEEP
javascriptbackbone.js
Hanpan
Hanpan

Reputation: 10251

Backbone - Instantiated view has old data

I have the following view class:

define(function(require) {
    var Backbone = require('backbone');

    var TestView = Backbone.View.extend({
        el: $("#test"),
        test: new Array(),

        initialize: function(){
            this.test.push("test");
            console.log(this.test);
        }
    });

    return TestView
});

When I instantiate the view, like so:

var v = new TestView();

The test array is incrementing by one each time as opposed to being empty on each instance. I have taken steps to remove zombie views (followed steps from this URL: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/) but the array is still retaining old data on each new instantiation.

Obviously I can remove the data inside the initialise function, but I'm curious as to why this data is being retained in what is essentially an entirely new view object? Seems like some garbage collection issue?

Upvotes: 2

Views: 68

Answers (1)

Andrew
Andrew

Reputation: 13853

Your new Array() call is only made when you create the TestView prototype, you need to create it when the object is actually made, otherwise it is shared between all the instances of TestView,

initialize: function(){
    this.test = new Array();
    this.test.push("test");
    console.log(this.test);
}

The same thing will happen with your el: $("#test") call as well, if I do,

var v = new TestView();
$("#test").detach();
var v2 = new TestView();
v.el == v2.el // true

So to accomplish what you want,

define(function(require) {
    var Backbone = require('backbone');

    var TestView = Backbone.View.extend({
        initialize: function(){
            this.test = new Array();
            this.test.push("test");
            console.log(this.test);
        }
    });

    return TestView
});

var v = new TestView({ el : '#test'});

Upvotes: 3

Related Questions