初始化后,Backbone Model变量未定义

时间:2014-07-15 06:32:36

标签: javascript backbone.js backbone-model

我有一个主干模型变量未定义的问题,即使我确定它在某个时候被初始化。

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();

基本上,我的代码是由位置类型组成的。 每个位置类型(教堂,酒吧,...)都有一个名称和一个感兴趣区域列表。

感兴趣的区域由标记和区域定义。 当用户点击复选框时,我希望AOI出现并消失。

我遇到的问题是某个区域出现了,但是当我运行hideAreas方法时,该列表被认为是未定义的。 此外,即使我有几个locationTypes,console.log语句"创建了新的感兴趣区域列表"只运行一次。

以下是控制台语句以及错误:

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

我不知道为什么AreaOfInterestList只运行一次,即使它是默认的LocationType。我也不知道为什么在我试图调用它时它是不确定的。

我能错过什么?

您可以看到该应用(包含错误)running here

1 个答案:

答案 0 :(得分:1)

模型属性存储在.attributes中,但您几乎应该始终使用.get()访问它们:

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

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