How to link-to a specific rails API route with server-generated content in ember?

I have a mixed Ember/Rails app with a Rails route in the API namespace to take any single Event and convert it to an .ics file for import into a user's calendar (a la this question). Ember is running with the command ember server --proxy http://localhost:3000, which is connecting it to the Rails server process.

The below snippets illustrate my setup:

Rails routes.rb snippet:

namespace :api do
  # snip
  resources :events do
  # snip
      get 'export_event_ical', on: :member
  end
end

Rails events_controller.rb snippet:

def export_event_ical
    @event = Event.find(params[:id])
    @calendar = Icalendar::Calendar.new
    ical_event = Icalendar::Event.new
    ical_event.dtstart = @event.start.strftime("%Y%m%dT%H%M%S")
    ical_event.dtend = @event.start.strftime("%Y%m%dT%H%M%S")
    ical_event.summary = @event.body.truncate(50)
    ical_event.description = @event.body
    # event.location = @event.location
    @calendar.add_event ical_event
    @calendar.publish
    headers['Content-Type'] = "text/calendar; charset=UTF-8"
    render :text => @calendar.to_ical
end

So, for example, in my Ember/Handlebars index template, if I have an event parameter that references a single Event, I can use <a href="http://localhost:3000/api/events/{{ event.id }}/export_event_ical">Export to iCal</a> to reach the API route that Rails is providing (i.e., skipping Ember on port 4200 and talking to Rails at 3000).

So far so good. But how do I make this into a dynamic Ember-controlled link that is routed through Ember to Rails?

I've tried a few things that don't work:

• Adding a route to the Ember events resource (router.js):

  this.resource('events', function() {
    this.route('show', {path: ':event_id'});
    this.route('export_to_ical', {
      path: '/api/events/:event_id/export_event_ical'
    });
  });
  
  

• Adding some goofball jQuery to the events.js route as a button action and using <button {{action 'export_to_ical' event.id}}>Export to iCal</button> in my template:

  import Ember from 'ember';

  export default Ember.Route.extend({
    actions: {
      exportToICal: function(eventID) {
        $.get('/api/events/' + eventID + '/export_event_ical',
              function(){
                alert('Got here.');
              }); 
      }
    }
  });
  
  

• Reading some docs:

  • http://ift.tt/1csr2eh
  • EmberJS - How to dynamically generate link with linkTo?

How are you supposed to do this in Ember?