Ember Routes and Rails Routes

Question

This is the question that I've had ever since I started studying Ember to see how it might work with Rails.

Rails has a routes.rb file with any number of existing routes. Ember has its own separate set of routes.

How does the browser know to look for an Ember route when the route does not exist in rails?

It would seem logical that rails would need to redirect the browser to Ember, but I have not seen that written up anywhere.

In most cases where there's an existing rails app, the route in routes.rb plays the role of turning the resource into an api and that makes the data available through a url.

That part was easy. I can see the data using that url.json

I am now at the stage of trying to get the browser to recognize one single route (of many existing in rails) through Ember routing.

This does not have anything to do with showing the data. I just want to see the template render.

I get the feeling that the route is just magically recognized by the browser (without any mention of Ember routing in routes.rb) based on what's happening behind the scenes in the Ember framework, but that's not what I've experienced in reality.

I keep getting a routing error:

Started GET "/newslinks" for 127.0.0.1 at 2013-08-08 12:44:30 -0700 ActionController::RoutingError (No route matches [GET] "/newslinks"):

Here is my application.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require chosen-jquery
//= require bootstrap
//= require bootstrap-notify
//= require jquery.limit-1.2.source
//= require bootstrap-switch
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require app

Here is my app.js:

App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  ready: function() {
    console.log('App ready');
  }
});

App.Router.map(function() {
    this.resource('newslinks', { path: '/' });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('newslinks');
  }
});

App.NewslinksRoute = Ember.Route.extend({
  model: function() {
  return App.Newslink.find();
  }
});

DS.RESTAdapter.reopen({
  namespace: 'api/v1'
});

App.Store = DS.Store.extend({
  revision: 13
});

App.Newslink = DS.Model.extend({
  name: DS.attr('string')
});

I've been told that this should actually be working, but it's not. Not sure where else to turn for help at this point, so if you have any recommendations or have a little time and want to freelance on the issue, please let me know.

Edit

Adding routes.rb for reference:

namespace :api do
    namespace :v1 do
      resources :newslinks
    end
  end

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-08-08T20:10:50

How does the browser know to look for an Ember route when the route does not exist in rails?

It doesn't. When you enter a url in browser, it will make request to the server, then rails should respond with some content. So in this case when the "/newslinks" url is requested you want rails to respond with an HTML page that includes your ember application.

When that page is loaded, the ember app will boot up and from there the ember-router will be used to handle links within the context of your ember app.

Make sense?

Ember Routes and Rails Routes

1 Answers