How to access controller property from function?

in a component I call a web service and save the results in a controller property.

On the didInsertElement event I grab a div (Ember.$.('#someDiv')) and initialize the bootstrap fullCalendar widget. Part of that is a handle to a function that fullCalendar calls to get event data for rendering.

In my component I have it defined like this:

import Ember from 'ember';
import moment from 'moment';
const {
    on
} = Ember;

var calData = {};
var rcId = {};

export default Ember.Component.extend({
    calEvents: function(start, end, timezone, callback) {
        // var scheduleData = this.get('scheduleData');
        var scheduleData = calData;
        ...a whole bunch of logic specific to finding events in my data for fullCalendar to display
        callback(eventData); // calling back to fullcalendar with the events to render
    },
    initialize: on('init', function() {
        var self = this;
        rcId = this.get('rcId');
        Ember.$.ajax({
            url: '/my/big/ugly/Url',
            beforeSend: function(request) {
                request.setRequestHeader('Accept', 'application/json');
            },
            dataType: 'json',
            contentType: 'application/json'
        }).done(function(data) {
            self.set('scheduleData', data);
            calData = data;
        });
    }),
    setupFullCalendar: function() {
        this._super();
        var self = this;
        Ember.$('#fullcal').fullCalendar({
            events: self.get('calEvents'),
        });
    }.on('didInsertElement')
});

As you can see, I created two variables rcId and calData and populate them so the function can use them. This clearly is not the Ember way.

If I reference this.get('calEvents') I get an undefined on get since the context isn't the controller, but rather fullCalendar.

What is the ember way??

EmberSherpa / ama

How to access controller property from function? #12