Ember this is undefined in component's component

Question

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.

Answer 1

我通过使用支持将动作传递到圆形事件ember-google-maps的其他插件解决了该问题。