0

I am working with Ember 2.18.

I have a component called map, and in this component I am using the addon ember-cli-g-maps. For this component I pass a circle array.

Here is the template: 

        {{g-maps
        name='geo-push-map'
        lat=location.lat
        lng=location.lon
        zoom=mapConfig.zoom
        mapType=mapConfig.mapTypeId
        disableDefaultUI=mapConfig.disableDefaultUI
        showZoomControl=mapConfig.zoomControl
        showScaleControl=mapConfig.scaleControl
        circles=circles
        }}

And this is how my circles array looks:

circles: A([
  {
    id: 'my-circle',
    lat: 45,
    lng: 15,
    radius: 2000,
    click(event, circle) {},
    rightclick(event, circle) {},
    dblclick(event, circle) {},
    mouseover(event, circle) {},
    mouseout(event, circle) {},
    mouseup(event, circle) {},
    mousedown(event, circle) {},
    mousemove(event, circle) {},
    drag(e, circle) {},
    dragstart(e, circle) {},
    dragend(e, circle) {},
    radius_changed(circle) {},
    center_changed(circle) {},
    clickable: true,
    draggable: true,
    editable: true,
    fillColor: '#009dd4',
    fillOpacity: 0.3,
    strokeColor: '#005d7d',
    strokeOpacity: 0.3,
    strokePosition: google.maps.StrokePosition.CENTER,
    strokeWeight: 3,
    visible: true,
    zIndex: 999,
  },
]),

I now want to be able to mutate a property inside my map component, when a circle event is triggered. I tried it like this:

...
radius_changed(circle) {
 set(this, 'myRadius', circle.radius);
},
...

But the problem is, that it tells me this is undefined. I suspect it's because it doesn't exist in the scope of the circle. Is there a different way to do it? Of course I read the documentation of the addon, as well as the issues, but couldn't find a way to do it.

Pingu69
  • 36
  • 5
  • [have a look here](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work). You should use an arrow function. So `radius_changed: circle => set(this, 'myRadius', circle.radius)`. – Lux Sep 26 '18 at 23:07
  • 1
    Arrow functions won't work in this case since `this` when defining object properties is undefined, if you want access to `this` as the component you will need to use a computed property for `circles`, since this code is triggered by a 3rd party code that is not run-loop aware when passing in the function to be triggered you will want to use [bind](https://www.emberjs.com/api/ember/3.4/functions/@ember%2Frunloop/bind). – Patsy Issa Sep 27 '18 at 06:32
  • 1
    @pingu69 how do you call the `radius_changed` method? It sounds as though you've likely passed the method to some other context, in which case `this` wouldn't be available. There are patterns (such as actions) for maintaining the scope if this is done in a template, but if you are passing this method via some JS code there are other patterns (like function bind and arrow params) for achieving this. Happy to help :) – runspired Sep 30 '18 at 02:13
  • you could change your methods to be a nested function that first takes this, and then takes the normal params? I think we need more context though – NullVoxPopuli Sep 30 '18 at 18:16

1 Answers1

0

I solved the problem by using a different addon which supports passing actions to the circle events, ember-google-maps.

Pingu69
  • 36
  • 5