How can I specify a URL 'prefix' for all Ember.js routes?

Question

I'm in the process of intergrating Ember.js into an existing Rails app. Would like to begin by using Ember for just a single controller action dashboard#index. From there, I'm planning to integrate the rest of the site into the ember application, probably on a per controller basis.

But I'm having trouble managing the ember URLs, because I'm not yet ready to cede control of the Rails root route to Ember.

For example, I'd like the following routes to be handled by rails, w/o Ember:

/
/login
/logout

while:

/dashboard

should trigger the Ember application. Then, there would be various ember dashboard routes such as /dashboard/#/favorites and dashboard/#/upcoming

I've got alternate Rails layouts and paths through the asset pipeline set up just fine, but I'm finding the Ember router doesn't play nice if the ember routes are tacked on after a prefix such as /dashboard/.

Is there a clean way to set this up?

Thanks

What are the issues you are encountering... if you are using HashLocation ('/dashboard/#/routeName') it should work just fine. — Teddy Zeenny
... not familiar with HashLocation... sounds like what I need... I see it in the API docs. Any mention / examples in the Guides, or elsewhere? Really just getting started with Ember. Thanks! — doublea
It's the default router behavior, no need to configure it. Should be just plug and play - provided u don't change the 'location' property of the router. — Teddy Zeenny
Teddy: You're totally right. It's working fine. Thought that redirecting was busted, among other things, for example, but it was an unrelated typo elsewhere in my application. Thanks much and very sorry. — doublea

Blair Anderson Blair Anderson · Accepted Answer · 2014-02-06T17:54:48

inside your dashboard controller set layout false so that it ignores your application layout.

Then make your dashboard/index.html.erb file to create its own layout and include the ember application. It should look something like this:

<!DOCTYPE html>
<html>
<head>
  <title>ember app</title>
  <%= stylesheet_link_tag  "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= javascript_include_tag "ember_app" %>
</body>
</html>

then in your assets/javascripts/ you should have a file ember_app.js that looks like this:

//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ./store
//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./components
//= require_tree ./templates
//= require_tree ./routes
//= require ./router
//= require helpers

# for more details see: http://emberjs.com/guides/application/
window.DashboardApp = Ember.Application.create()

A good resource i used is the ember-rails gem. It has good documentation as well.

How can I specify a URL 'prefix' for all Ember.js routes?

1 Answers