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

Question

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 'exportToICal' 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://guides.emberjs.com/v1.10.0/components/sending-actions-from-components-to-your-application
- EmberJS - How to dynamically generate link with linkTo?

How are you supposed to do this in Ember?

I don't think you should use the {{link-to}} helper for this, nor set the "external" route in your router. It's intended to work with the router to transition within an ember app. For external, you use a and bind the href to external resources — MilkyWayJoe

aceofspades aceofspades · Accepted Answer · 2015-05-07T22:23:57

In my app I use the environment to declare server endpoints, sort of like in rails, at the bottom:

/* jshint node: true */
'use strict';

var extend = require('util')._extend;

module.exports = function(environment, appConfig) {
  var ENV = extend(appConfig, {
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    },
  });

  if (environment === 'development') {
    ENV.serverHost = 'http://localhost:3000';
  }

  return ENV;
};

Then you can grab the value like this

var config = this.container.lookup('config:environment');
var url = config.serverHost + "/...";

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

1 Answers