Migrate Routes from Rails to Ember with Existing Rails Application using “ember-rails”

Question

Using gem "ember-rails" for an existing rails app. I'm attempting to route one resource using Ember, and I've been told by a number of people that this code should work, but it's not.

I want to breakthrough the learning curve and make this work, but I need some help.

Error

Routing Error
No route matches [GET] "/newslinks"

Code

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

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')
});

routes.rb

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

application.handlebars

    <!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember - Latest" />
<meta charset=utf-8 />
<title>Ember Latest</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
  <script src="http://builds.emberjs.com/ember-data-latest.js"></script>
</head>
<body>
  <script type="text/x-handlebars">
    <h2>Here I am</h2>
  </script>
</body>
</html>

Conclusion

Please let me know how you would recommend setting up just one route: /newslinks through Ember and getting it to render using an existing rails route.

This is not about the data (just want to render the route using ember). Also, this code works in jsbin, so it's also not about getting Ember to work independently of rails

Do I need to direct rails to render a Ember route in routes.rb? Or is Ember routing sitting on top of rails routing and cherry picking the routes it recognizes?

Marcio Junior Marcio Junior · Accepted Answer · 2013-08-06T23:25:01

If you are using the ember data with rest adapter the configuration is the following:

Given this url your-host/api/v1/newslinks with the following json structure:

{
  newslinks: [
    {id: 1, name: 'foo'},
    {id: 2, name: 'bar' }
  ]
}

You just need to map the newslinks routing:

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

And map the namespace in DS.RestAdapter:

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

Here is a live demo using rest adapter and mocking the response.

By default rails will serve the json without the root path of the json:

[
  {id: 1, name: 'foo'},
  {id: 2, name: 'bar' }
]

To get this work easily, in a rails controller just add the :json to your render method, followed by the data. So rails will use the active model serializers, and the root path will be present:

def index
  @users = User.all
  render json: @users
end

I hope it helps.

Migrate Routes from Rails to Ember with Existing Rails Application using “ember-rails”

1 Answers