Question

59

Backbone.js get and set nested object attribute

rated 0 times [ 65] [ 6] / answers: 1 / hits: 84571 / 13 Years ago, tue, june 14, 2011, 12:00:00

I have a simple question about Backbone.js' get and set functions.

1) With the code below, how can I 'get' or 'set' obj1.myAttribute1 directly?

Another question:

2) In the Model, aside from the defaults object, where can/should I declare my model's other attributes, such that they can be accessed via Backbone's get and set methods?

var MyModel = Backbone.Model.extend({

    defaults: {

        obj1 : {

            myAttribute1 : false,

            myAttribute2 : true,

        }

    }

})



var MyView = Backbone.View.extend({

    myFunc: function(){

        console.log(this.model.get(obj1));

        //returns the obj1 object

        //but how do I get obj1.myAttribute1 directly so that it returns false?

    }

});

I know I can do:

this.model.get(obj1).myAttribute1;

but is that good practice?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

acaciac

Add To Favorites

Follow

Total Points: 317

Total Questions: 117

Total Answers: 128

Location: France

Member since Thu, Oct 27, 2022

2 Years ago

answered 13 Years ago stephonkeandrer · Accepted Answer

While this.model.get(obj1).myAttribute1 is fine, it's a bit problematic because then you might be tempted to do the same type of thing for set, i.e.

this.model.get(obj1).myAttribute1 = true;

But if you do this, you won't get the benefits of Backbone models for myAttribute1, like change events or validation.

A better solution would be to never nest POJSOs (plain old JavaScript objects) in your models, and instead nest custom model classes. So it would look something like this:

var Obj = Backbone.Model.extend({

    defaults: {

        myAttribute1: false,

        myAttribute2: true

    }

});



var MyModel = Backbone.Model.extend({

    initialize: function () {

        this.set(obj1, new Obj());

    }

});

Then the accessing code would be

var x = this.model.get(obj1).get(myAttribute1);

but more importantly the setting code would be

this.model.get(obj1).set({ myAttribute1: true });

which will fire appropriate change events and the like. Working example here: http://jsfiddle.net/g3U7j/