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

score 5 · Accepted Answer · answered Aug 08 '13 at 20:10

5

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?

answered Aug 08 '13 at 20:10

Mike Grassotti

19,040
3
59
57

Right. Rails doesn't know or care about ember, but it should be setup to serve your ember application when that url is requested. – Mike Grassotti Aug 08 '13 at 20:18
Okay, great. So, I set up my resource as an api (added code to question above), but that only handles the data. What I don't know is how to "redirect" so that `/newslinks` is handled by ember: – Brian McDonough Aug 08 '13 at 20:24
OK now you will need a rails route to serve the ember app. Add something like `get 'newslinks', to: 'ember#main'` in your routes.rb. Then add `app/controllers/ember_controller.rb` and `app/views/ember/main.html.erb`. Make sure your view includes a reference to `application.js` and your handlebars templates. – Mike Grassotti Aug 08 '13 at 22:03
BTW, the ember-rails gem will generate most of this for you so in future give that a try. https://github.com/emberjs/ember-rails - I'd also suggest checking out this tutorial http://www.devmynd.com/blog/2013-3-rails-ember-js – Mike Grassotti Aug 08 '13 at 22:05
I am using ember-rails, so something is awry. I can get the app to render by placing a newslinks controller in application controller in rails and now I can see Ember in the console, but still not rendering the Ember template, which makes sense because it's rendering a view from rails. Is there a way to render the Ember template inside the rails template? – Brian McDonough Aug 08 '13 at 22:25
Yes that is how it always works. Ember templates are not related to rails, they don't conflict in any way. I would start by putting hbs templates inline via script tags in your erb. Once that's working have a look at ember-rails readme for advice on pre-compiling hbs templates . – Mike Grassotti Aug 08 '13 at 23:07
Okay, thanks Mike. Still have yet to see the template show up in my rails view using `<%= javascript_include_tag 'templates/newslinks.handlebars' %>`, but I've gained a lot of understanding today. Thank you. – Brian McDonough Aug 08 '13 at 23:59

Ember Routes and Rails Routes

1 Answers1

Linked