Backbone.js model caching

Question

Note : I am a very very beginer on Backbone platform !! :)

I have this Model in Backbone:

var errors_model    =   Backbone.Model.extend(
{
        total_errors     : 0,
        error_messages   : {},
        initialize       : function ()
        {
            this.set('total_errors',        0);
            this.set('error_messages',      {});
        },
        add_error        : function (tab, field, error)
        {
            var error_messages = this.get('error_messages');
            var error_md5 = this.md5(error);

            if(!(tab in error_messages))
            {
                error_messages[tab] =   {};
            }

            if(!(field in error_messages[tab]))
            {
                error_messages[tab][field]  =   {};
            }

            if(!(error_md5 in error_messages[tab][field]))
            {
                error_messages[tab][field][error_md5]   =   error;
            }

            this.set('error_messages', error_messages);
            this.increase_errors();
            console.log(error_messages);
        },
        remove_error     : function (tab, field, error)
        {
            var error_messages  =   this.get('error_messages');
            var error_md5       =   this.md5(error);

            if(!(tab in error_messages) && !(field in error_messages[tab]) && !(error_md5 in error_messages[tab][field]))
            {
                return;
            }

            delete error_messages[tab][field][error_md5];

            this.set('error_messages',  error_messages);
            this.decrease_errors();
            console.log(error_messages);
        },
        increase_errors  : function()
        {
            var total_errors    =   this.get('total_errors');

            if('undefined' === typeof(total_errors))
            {
                total_errors    =   0;
            }

            ++total_errors;

            this.set('total_errors',    total_errors);
        },
        decrease_errors  : function()
        {
            var total_errors    =   this.get('total_errors');

            if('undefined' === typeof(total_errors))
            {
                total_errors    =   0;
            }

            if(0 === total_errors)
            {
                return;
            }

            --total_errors;

            this.set('total_errors',    total_errors);
        }
    }
);

com                        =   window.com  ||  {};
com.wp                     =   com.wp      ||  {};
com.wp.srb                 =   com.wp.srb  ||  {};
com.wp.srb.errors_model    =   new errors_model();

and then I use this code:

com.wp.srb.errors_model.add_error('#ad',       '#image_upload',    'This is an error');
com.wp.srb.errors_model.add_error('#ad',       '#image_upload',    'Another error');
com.wp.srb.errors_model.add_error('#ad',       '#image_upload',    'Yet another error');
com.wp.srb.errors_model.add_error('#ad',       '#image_url',       'URL error');

setTimeout(
    function()
    {
        com.wp.srb.errors_model.remove_error('#ad',    '#image_upload',    'Another error');
    },
    3500
);

But the result I am getting is this for both action (com.wp.srb.errors_model.add_error and com.wp.srb.errors_model.remove_error):

Object {#ad: Object}
    #ad: Object
        #image_upload: Object
            13b7afb8b11644e17569bd2efb571b10: "This is an error"
            69553926a7783c27f7c18eff55cbd429: "Yet another error"
        #image_url: Object
            2b4a9847e26368312704b8849de9247a: "URL error"
            __proto__: Object
        __proto__: Object
    __proto__: Object

Object {#ad: Object}
    #ad: Object
        #image_upload: Object
            13b7afb8b11644e17569bd2efb571b10: "This is an error"
            69553926a7783c27f7c18eff55cbd429: "Yet another error"
        #image_url: Object
            2b4a9847e26368312704b8849de9247a: "URL error"
            __proto__: Object
        __proto__: Object
    __proto__: Object

Object {#ad: Object}
    #ad: Object
        #image_upload: Object
            13b7afb8b11644e17569bd2efb571b10: "This is an error"
            69553926a7783c27f7c18eff55cbd429: "Yet another error"
        #image_url: Object
            2b4a9847e26368312704b8849de9247a: "URL error"
            __proto__: Object
        __proto__: Object
    __proto__: Object

Object {#ad: Object}
    #ad: Object
        #image_upload: Object
            13b7afb8b11644e17569bd2efb571b10: "This is an error"
            69553926a7783c27f7c18eff55cbd429: "Yet another error"
        #image_url: Object
            2b4a9847e26368312704b8849de9247a: "URL error"
            __proto__: Object
        __proto__: Object
    __proto__: Object

Object {#ad: Object}
    #ad: Object
        #image_upload: Object
            13b7afb8b11644e17569bd2efb571b10: "This is an error"
            69553926a7783c27f7c18eff55cbd429: "Yet another error"
        #image_url: Object
            2b4a9847e26368312704b8849de9247a: "URL error"
            __proto__: Object
        __proto__: Object
    __proto__: Object

So the question is, does the Backbone model, somehow caching the object attributes? Am I doing anything wrong?

NOTE: This is a part of a plugin that will be used in the WordPress Dashboard, I don't know if WordPress already uses any plugin for caching model data.

Answer 1

Console holds references to the objects, therefore when you inspect them after the code execution, the state of the object will be as it is right now, not as it is when you invoked:

console.log(error_messages);

This might work for strings or numbers, but will not work for objects. Thankfully you can turn an object into a string using:

JSON.stringify(error_messages);

Which will give you a snapshot of the object at the time of execution.