Nested Routing Error Ember.JS and Rails

Question

I have an ember-rails app that contains a table of servers, and a link to each individual server.

Here is the main servers.handlebars file:

<table id="box-table-a">
    <thead> 
        <th>Name</th> 
        <th>Operating System</th> 
        <th>Build Stage</th> 
    </thead> 
    <tbody> 
        {{#each server in controller}} 
        <tr> 
            <td>
                {{#link-to 'server' server}}
                    {{server.name}}
                {{/link-to}}
            </td> 
            <td>{{server.operating_system}}</td> 
            <td>{{server.build_stage}}</td> 
        </tr> 
        {{/each}}
    </tbody>
</table>

{{outlet}}

Which creates the appropriate table, as expected. And when hovering over a servers name I will receive the url in in the bottom left corner of the browser: #/servers/1 , #/servers/2 , etc

However, when I click the link to an individual server, the server template is not rendered. Here is my server.handlebars file:

<div>
    <h2> {{name}} </h2>
    <h2> {{operating_system}} </h2>
    <h2> {{build_stage}} </h2>
</div>

Below is my server.js.coffee file located in the javascripts/models folder:

Warthog.Server = DS.Model.extend
  name: DS.attr('string')
  operating_system: DS.attr('string')
  build_stage: DS.attr('string')

My serversRoute.js.coffee file:

Warthog.ServersRoute = Ember.Route.extend
  model: -> @store.find('server')

My serverRoutes.js.coffee file:

Warthog.ServerRoute = Ember.Route.extend
    model: (params) ->
        @store.find('server', params.server_id)

Last is the router.js.coffee file

Warthog.Router.map ->
  @resource "servers", ->
    @resource "server", path: "/:server_id", ->
      @route "edit"
    @route "create"

Please note that the ember toolbox within Chrome is not showing any routes and that an error is only thrown in the console when attempting to navigate to an individual server. Below is the error.

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js?body=1:5387
Ember Debugger Active VM3178:391
DEPRECATION: Action handlers contained in an `events` object are deprecated in favor of putting them in an `actions` object (error on <Ember.Route:ember430>)
        at Object.triggerEvent (http://testdomain.warthog.dev/assets/ember.js?body=1:30519:13)
        at trigger (http://testdomain.warthog.dev/assets/ember.js?body=1:29641:16)
        at handlerEnteredOrUpdated (http://testdomain.warthog.dev/assets/ember.js?body=1:29537:11)
        at http://testdomain.warthog.dev/assets/ember.js?body=1:29512:9
        at eachHandler (http://testdomain.warthog.dev/assets/ember.js?body=1:29559:9)
        at setupContexts (http://testdomain.warthog.dev/assets/ember.js?body=1:29511:7)
        at finalizeTransition (http://testdomain.warthog.dev/assets/ember.js?body=1:29835:7)
        at transitionSuccess (http://testdomain.warthog.dev/assets/ember.js?body=1:29732:13)
        at invokeCallback (http://testdomain.warthog.dev/assets/ember.js?body=1:8055:19) ember.js?body=1:394
Error while loading route: TypeError {} ember.js?body=1:394
Uncaught TypeError: Object function () {
    var Class = makeCtor(), proto;
    Class.ClassMixin = Mixin.create(this.ClassMixin);
    Class.PrototypeMixin = Mixin.create(this.PrototypeMixin);

    Class.ClassMixin.ownerConstructor = Class;
    Class.PrototypeMixin.ownerConstructor = Class;

    reopen.apply(Class.PrototypeMixin, arguments);

    Class.superclass = this;
    Class.__super__  = this.prototype;

    proto = Class.prototype = o_create(this.prototype);
    proto.constructor = Class;
    generateGuid(proto, 'ember');
    meta(proto).proto = proto; // this will disable observers on prototype

    Class.ClassMixin.apply(Class);
    return Class;
  } has no method 'create' 

Answer 1

The short

This is a commom error when using coffe with ember, probally you are using SomeEmberObject.extend instead of SomeEmberObject.extend() .

The long

When you use Foo = SomeEmberObject.extend without args, coffee generate the following code:

var Foo;

// Foo is a reference to extend, this is not what we want 
Foo = SomeEmberObject.extend;

Because Foo is just a refence to extend, when Foo.create() is called, this is the same like SomeEmberObject.extend.create() and will throw your current error.

Obervation: even you not calling create directlly in your code, ember use your declared classes, and call create when performing the dependency injection.

With args, the extend function is called correctlly:

Foo = SomeEmberObject.extend
  message: 'hello'

Generates:

var Foo;

// ok
Foo = SomeEmberObject.extend({
  message: 'hello'
});

So you need to replace in your code, classes declared like Foo = SomeEmberObject.extend to Foo = SomeEmberObject.extend() .

For example:

// wrong
Warthog.ServerController = Ember.ObjectController.extend

// correct
Warthog.ServerController = Ember.ObjectController.extend()