骨干模型中的属性更改值beetwen console.log

Question

I have simple user model:

var user = Backbone.Model.extend({
            initialize: function(){
                this.bind("change:auth", function (){
                    if(this.get("auth") == true){
                        $.cookie('auth', true);
                        $.cookie('username', this.get("username"));
                        $.cookie('sessid', this.get("sessid"));
                        console.log(this)
                        console.log(this.attributes)
                    }else{
                        $.cookie('auth', null);
                        $.cookie('username', null);
                        $.cookie('sessid', null);
                    }
                });
            },
            defaults : {
                'auth' : $.cookie('auth'),
                'username' : $.cookie('username'),
                'sessid' : $.cookie('PHPSESSID')
            },
            logout : function (){
                this.clear();
            }

        });

I don't know why it's happening, but when using the set method (and firing change event) the first console log is:

_callbacks
    Object { change:auth=[1]}

_changed
    false

_changing
    false

_escapedAttributes
    Object {}

_previousAttributes
    Object { auth=true, username="admin", sessid="roo74p7m7t0a3erke8r3vsat33"}

_unsetAttributes
    null

attributes
    Object { auth=true, username="admin", sessid="roo74p7m7t0a3erke8r3vsat33"} //<--  under this.attributes.username is string

cid
    "c0"

defaults
    Object { sessid="roo74p7m7t0a3erke8r3vsat33", auth=null, username=null}

idAttribute
    "id"

constructor
    function()

_performValidation
    function()

bind
    function()

change
    function()

changedAttributes
    function()

clear
    function()

clone
    function()

destroy
    function()

escape
    function()

fetch
    function()

get
    function()

has
    function()

hasChanged
    function()

initialize
    function()

isNew
    function()

logout
    function()

parse
    function()

previous
    function()

previousAttributes
    function()

save
    function()

set
    function()

toJSON
    function()

trigger
    function()

unbind
    function()

unset
    function()

url
    function()

__proto__
    Object { defaults={...}, _changed=false, idAttribute="id"}

Everythings seems to be ok, but then the second console.log (this.attributes) is:

Object { auth=true, sessid="roo74p7m7t0a3erke8r3vsat33", username=null} // oh no now it's null

In conclusion, value of this.attributes.username was changed whitout any action on it. Any idea how I can resolve it?

Answer 1

This is just a little quirk related to Firebug. I assume you're setting a few properties at one time, like this:

var myuser = new user();
myuser.set({sessid:"roo74p7m7t0a3erke8r3vsat33", auth:true, username:"admin"});

What's happening is this, the change:auth event is being called before the username has been set in the model. Because of this the second console.log is correct, no username has been set yet, so it doesn't show up there.

The reason you're seeing everything correctly in the first console.log is because you're logging a reference to the user object, not a copy . By the time you click on the object in your console, all of the attributes have since been set, so you see them all there.

So your code is functioning correctly, all properties are being set. You should be able to verify this by adding a console.log right after you set the properties, like so:

var myuser = new user();
myuser.set({sessid:"roo74p7m7t0a3erke8r3vsat33", auth:true, username:"admin"});
console.log(myuser.attributes);

Another way to prove the case, if you move username:"admin" to before auth:true in your the set object, like this:

var myuser = new user();
myuser.set({sessid:"roo74p7m7t0a3erke8r3vsat33", username:"admin", auth:true});

You should see the username show up in the second console.log since the username attribute will have been set before change:auth is called.