Cannot clear Backbone model array attribute

Question

Im trying to clear data from a Backbone model. Check out the jsfiddle here. Th JS is:

    $(function(){
    //Define Model
    var loginData = Backbone.Model.extend({
            defaults: {
                token: null,
                data: []
            },

            initialize: function () {
            },

            /*
            * Push name/value to data array. If name is already present, overwrite value. Otherwise, push to end of data array
            */
            addToData: function (nameValue) {
                var data = this.get('data');

                var item, exists = false, index;
                for (var key in data) {
                    // The key is key
                    item = data[key];
                    if (item['name'] === nameValue.name) {
                        exists = true;
                        index = key;
                    }
                }
                if (exists) {
                    //overwrite value if name already in array
                    data[index].value = nameValue.value;
                } else {
                    //add to end of array if name not in array
                    data.push(nameValue);
                }
            },

            clearSensitiveData: function () {
                console.log('in clearSensitiveData');
                this.set('data', [], { silent: true });
                this.set('token', null, { silent: true });

            },
        });


    //Model View & event action
    var View = Backbone.View.extend({

        initialize: function() {
            this.model = new loginData();
        },
        addData: function(nameValue) {
            this.model.addToData(nameValue);
        },
        clear: function() {
            this.model.destroy();
        }

    });

    var view = new View;

    view.addData({'username':'abcd'});
    console.log('username of view is ');
    console.log(view.model.get('data')[0].username);

    view.model.clearSensitiveData();

    var view2 = new View;

    console.log('username of view2 is (this should fail because model should be cleared) ');
    console.log(view2.model.get('data')[0].username);



}());

If you look at the console.log outputs, you see:

username of view is  (index):100
abcd (index):101
in clearSensitiveData (index):74
username of view2 is (this should fail because model should be cleared)  (index):107
abcd

This is very odd as clearSensitiveData() should reset the "data" array attribute, but somehow, the model remains populated...

user229044 · Accepted Answer · 2014-09-18 14:18:10Z

The problem is that you're using

defaults: {
  data: []
}

You're giving every instance of loginData access to the same instance of the data array. You can't use objects as defaults in a model's defaults:, or that same object is referenced by every instance of the model.

From the Backbone docs:

Remember that in JavaScript, objects are passed by reference, so if you include an object as a default value, it will be shared among all instances. Instead, define defaults as a function.

Either define defaults as a function, or manually initialize it in initialize:

defaults: {
  data: null
},

initialize: function () {
  this.set('data', []);
}

As for why your clearSensitiveData isn't working, remember, all instances of your model share the same data after they're instantiated. You're not clearing that shared array, you're just overwriting it in your first instance with a new []. The other model in view2 still points to the original data array, which has not been modified in any way by clearSensitiveData.

Your clearSensitiveData function is fine, you just need to make sure each instance of your model has its own data array.

Collectives™ on Stack Overflow

Cannot clear Backbone model array attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related