Introduction

Ember.js looks awesome but like any open source project it's on the move so samples get stale fast.

I spent a few hours hacking around with the tutorials I could find specifically about Ember.js and Rails, but without much success.

http://emberwatch.com/#tutorials ->

• http://reefpoints.dockyard.com/ember/2013/01/07/building-an-ember-app-with-rails-api-part-1.html
• http://www.cerebris.com/blog/2012/01/24/beginning-ember-js-on-rails-part-1/

In the end I took the MVC Todo app because I knew it was current and went from there. On to the readme!

README

Demonstration of Ember MVC Todo tutorial app converted to work with rails back end.

This works with Rails 4.0.1.

I moved a few files around from the original app to make it more railsy.

Using the serializer gem puts things in the format ember likes.
Check the docs at https://github.com/rails-api/activemodelserializers

Installation

git clone https://github.com/mribbons/ember-todo-with-rails
cd ember-todo-with-rails
bundle install
rake db:migrate


Changes

app/assets/javascripts/application.js:

Get rid of this:
Todos.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'todos-emberjs'
});


Add this:
Todos.Store = DS.Store.extend({});


Change 'todo' model references to Todos.Todo:

app/assets/javascripts/controllers/todos_controller.js:

var todo = this.store.createRecord('todo', { // change this
var todo = this.store.createRecord(Todos.Todo, { // to this


app/assets/javascripts/router.js:

Todos.TodosActiveRoute = Ember.Route.extend({
model: function(){
return this.store.filter('todo', function(todo){ // change this
return this.store.filter(Todos.Todo, function(todo){ // to this

Todos.TodosCompletedRoute = Ember.Route.extend({
model: function(){
return this.store.filter('todo', function(todo){ // change this
return this.store.filter(Todos.Todo, function(todo){ // to this


Issues

Modifying an item's title works, but throws an error:
Uncaught Error: Attempted to handle event `willCommit`
on <Todos.Todo:ember402:5> while in state root.loaded.updated.inFlight.


Todo

Move the handlebars templates into .js files under views.

Conclusions

I hope this demo app saves someone a few hours.

Want the code? https://github.com/mribbons/ember-todo-with-rails

Got problems? https://github.com/mribbons/ember-todo-with-rails/issues

Don't like my markdown? Fine.