CODEWITHSUNDEEP
google-mapsember.js
Johnny
Johnny

Reputation: 7321

Unable to access property in ember.js view

I have a view of a Google map and I want it to expose the map so I can bind to it from another object. The problem is that since I can only instantiate the map on didInsertElement (instantiating it directly won't work since the div hasn't been rendered yet) I'm unable to access the true value of the map (it always returns null).

Here's my code:

Places = Ember.Application.create();
Places.MapView = Ember.View.extend({
    tagName : 'div',    
    map : null,               
    didInsertElement : function() {
        this._super();
        this.set('map', new google.maps.Map($('#map').get(0), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(-33.8665433,151.1956316),
        zoom: 15
        }));
        this.get('map'); // Returns the value of the map OK
    }
});

Places.searchController = Ember.Object.create({
    mapBinding: 'Places.MapView.map' // Doesn't work
}

Here's the template:

<script type="text/x-handlebars">
{{#view Places.MapView id="map"}}{{/view}}          
</script>

If I set any other property within MapView directly I have no problem binding to it. Any ideas on how to solve this?

Upvotes: 1

Views: 747

Answers (2)

Veebs
Veebs

Reputation: 2388

In my controllers, I usually bind to a "model" object and not a view object.

Maybe try setting the map to a different object.

Places = Ember.Application.create();

Places.MapData = Ember.Object.create({
    map: null
});

Places.MapView = Ember.View.extend({
    tagName : 'div',    
    map : null,               
    didInsertElement : function() {
        this._super();
        Places.MapData.set('map', new google.maps.Map($('#map').get(0), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(-33.8665433,151.1956316),
        zoom: 15
        }));
    }
});

Places.searchController = Ember.Object.create({
    mapBinding: 'Places.MapData.map'
});

Upvotes: 5

rharper
rharper

Reputation: 2438

In your searchController you are binding to the map property of the MapView class. The class does not have a map property. When the class is instantiated and didInsertElement runs, the map property is added to a MapView instance. To make your binding work you'll need to bind to the map property of the instantiated view, not the class.

Upvotes: 1

Related Questions