Backbone Model variable undefined after initialize

Question

I have a problem with a backbone model variable being undefined even though I am sure it is initialized at some point.

AreaOfInterest = Backbone.Model.extend({
    defaults:{
        marker: null, // center of the area
        area: null // area around the center
    },
    initialize: function(){
      console.log("Created new Area of Interest");
    }

})

AreaOfInterestList = Backbone.Collection.extend({
    model: AreaOfInterest,
    initialize: function(){
        console.log("Created new Area of Interest List");
    },
    /*
    Displays all Area Of Interests in the collection
     */
    display: function(){
        console.log("Displaying all Areas of Interest.");
        this.each(function(aoi){
            map.addLayer(aoi.get("marker"));
            map.addLayer(aoi.get("area"));
        })
    },
    /*
     Hides all Area Of Interests in the collection
     */
    hide: function(){
        console.log("Hiding all Areas of Interest.");
        this.each(function(aoi){
            map.removeLayer(aoi.get("marker"));
            map.removeLayer(aoi.get("area"));
        })
    }
});

LocationType = Backbone.Model.extend({

    defaults:{
        id: null,
        name: null,
        type: null,
        areaOfInterestList: new AreaOfInterestList()
    },

    initialize: function(){
    },
    hideAreas: function(){
        console.log("LocationType : Hiding all elements");
        console.log(this.id);
        console.log(this.areaOfInterestList);
        this.areaOfInterestList.hide();
        //FIXME: This is not working yet.
    }
});

var airportType = new LocationType({name: "Airport", type: 'airport', id: 'airport', areaProperties: new AreaProperties({strokeColor: aqua, fillColor: aqua})});
var embassyType = new LocationType({name: "Embassy", type: 'embassy', id: 'embassy', areaProperties: new AreaProperties({strokeColor: teal, fillColor: teal})});


/* In the javascript code, this is ran to show AOIs */
var areaOfInterestList = airportType.get('areaOfInterestList');

console.log("Found " + results.length +  " result!");
for (var i = 0, result; result = results[i]; i++) {
    //Create AOI and adds it to the item.
    var aoi = createAreaOfInterest(result, areaProperties);
    areaOfInterestList.add(aoi);
}
item.set({areaOfInterestList: areaOfInterestList});
var aoil = item.get('areaOfInterestList');
aoil.display();

/* In the javascript code, this is ran to hide AOIs */
airportType.hideAreas();

So basically, my code is compozed of location types. Each location type (church, bar, . . .) has a name, and a list of Area Of Interests.

And area of interest is defined by a marker and an area. When the user clicks on a checkbox, I want the AOIs to appear and disappear.

The problem I have is that somehow the areaas show up, but when I run the hideAreas method, the list is said to be undefined. Also, even though I have several locationTypes, the console.log statement "Created new Area of Interest List" is ran only once.

Here is the console statements, together with the error :

Created new Area of Interest List main.js:58
Selected : train_station main.js:390
Found 21 result! main.js:406
21
Created new Area of Interest main.js:47
Displaying all Areas of Interest. main.js:64
LocationType : Hiding all elements main.js:121
train_station main.js:122
undefined main.js:123
Uncaught TypeError: Cannot read property 'hide' of undefined main.js:124

I have no idea why the AreaOfInterestList is ran only once even though it is in the default of LocationType. I also don't know why it is undefined whe I try to call it.

What can I be missing?

You can see the app (with the bug) running here .

Answer 1

Model attributes are stored in .attributes, but you should almost always access them using .get():

hideAreas: function(){
    //...
    console.log(this.attributes.areaOfInterestList);
    this.get('areaOfInterestList').hide();
}

http://backbonejs.org/#Model-attributes