Clever Geek Handbook

How to bind to a specific rails API route with server-side content in ember?

I have a mixed Ember / Rails application with a Rails route in an API namespace to take any one event and convert it to a file .ics

to be imported into the user's calendar (a la this question ). Ember works with a team ember server --proxy http://localhost:3000

that connects it to the Rails server process.

The snippets below 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

fragment:

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 a parameter event

that refers to one 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 provides (i.e. passes Ember on port 4200 and talking to Rails on 3000).

So far so good. But how do you do this into a dynamic managed Ember link that is routed through Ember to Rails?

I've tried several things that don't work:

  • Adding a route to an Ember events

    ( router.js

    ) resource :

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

  • Adding jQuery goofball to the route events.js

    as a button action and using it <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:

How should you do this in Ember?

0


source to share


1 answer


In my application, I use a framework 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 get a value like this

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


source






More articles:


All Articles