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

Ratcliff

Answer 1

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?

Reverential

Right. Rails doesn't know or care about ember, but it should be setup to serve your ember application when that url is requested. – Reverential

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: – Ratcliff

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. – Reverential

BTW, the ember-rails gem will generate most of this for you so in future give that a try. github.com/emberjs/ember-rails - I'd also suggest checking out this tutorial devmynd.com/blog/2013-3-rails-ember-js – Reverential

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? – Ratcliff

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 . – Reverential

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. – Ratcliff