Setting the attribute values of a Model in backbone.js

Question

I am learning backbone.js by following a tutorial. I tried out some code, and it appeared really strange. I first initialized a model instance with src being thesource.jpg, did a console.log of the model instance, then set the src attribute to aaa followed by a console.log.

In the javascript console, I see that for both outputs, the src is the same aaa. Shouldnt they be different?

JS Code

var Photo = Backbone.Model.extend({
   defaults: {
        src: 'placeholder.jpg',
        title: 'An image placeholder',
        coordinates: [0, 0]
    },

    initialize: function() {
        this.bind("change:src", function() {
            var src = this.get("src");
            console.log('Image source updated to ' + src);
        });
        console.log('This model has been initialized!');
    },

    changeSrc: function(source) {
        this.set({src: source});
    }
});

window.myPhoto = new Photo({title: "My awesomeness",
                        src: "thesource.jpg",
                        location: "Boston",
                        tags: ['big game', 'vacation']});

console.log(myPhoto.attributes);
myPhoto.set({src:'aaaa'});
console.log(myPhoto.attributes);

Console Output

enter image description here

Esailija · Accepted Answer · 2012-06-12 14:21:56Z

1

When you log objects in google chrome, their state is retrieved when you expand their properties in the console, not when you log them.

You can try to log a clone:

console.log(JSON.parse(JSON.stringify(myPhoto.attributes)));
myPhoto.set({src:'aaaa'});
console.log(JSON.parse(JSON.stringify(myPhoto.attributes)));

answered Jun 12, 2012 at 14:21

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

loganfsmyth · Accepted Answer · 2012-06-12 16:12:33Z

1

The answer above works, but I just want to point out that Backbone has functions that do basically this already. You can use toJSON, which clones all attributes and returns an object.

console.log(myPhoto.toJSON());
myPhoto.set({src: 'aaaa'});
console.log(myPhoto.toJSON());

This will show a shallow copy, so it's not quite the same, but it's less to type and would still work in the case you are looking for.

answered Jun 12, 2012 at 16:12

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

Collectives™ on Stack Overflow

Setting the attribute values of a Model in backbone.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related