Issue creating new route-view in Ember

Question

I have been following along the Vic Ramon's Ember tutorial (I'm new) and I was able to successfully create CRUD interface that work back to 1 postgres table. http://ember.vicramon.com/our-app

I wanted to extend this tutorial to work with 2 different postgres tables via rails. Here is the router (names works great, states does not):

App.Router.reopen
  location: 'auto'
  rootURL: '/'


App.Router.map ()->
  @resource 'names', path: '/', ->
    @route 'new'
    @resource 'name', path: '/name/:id', ->
      @route 'edit'

  @resource 'states', path: '/states/', ->
    @resource 'state', path: ':id'

Controller:

App.StatesController = Ember.ArrayController.extend

Route:

App.StatesRoute = Ember.Route.extend

  model: -> @store.find 'state'

Model:

App.State = DS.Model.extend
  calc_num:         DS.attr 'number'
  energy_list:      DS.attr 'string'
  dos_list:         DS.attr 'string'
  atom_subset:      DS.attr 'string'
  orbital_subset:   DS.attr 'number'
  fermi_level:      DS.attr 'number'
  core_level:       DS.attr 'number'
  elec_occ_list:    DS.attr 'string'
  elec_energy_list: DS.attr 'string'

Template:

article#states
h1 DOS States
ul
  each state in controller
    link-to 'state' state tagName="li"
      state.calc_num

When I run the website, I get the following error:

>   Error while loading route: TypeError: undefined is not a function
>     at instantiate (http://lh:3000/assets/ember.js?body=1:11474:26)
>     at lookup (http://lh:3000/assets/ember.js?body=1:11340:19)
>     at Object.Container.lookup (http://lh:3000/assets/ember.js?body=1:11019:16)
>     at Ember.Route.Ember.Object.extend.controllerFor (http://lh:3000/assets/ember.js?body=1:36763:28)
>     at Ember.Route.Ember.Object.extend.setup (http://lh:3000/assets/ember.js?body=1:36302:27)
>     at handlerEnteredOrUpdated (http://lh:3000/assets/ember.js?body=1:33569:36)
>     at http://lh:3000/assets/ember.js?body=1:33538:18
>     at forEach (http://lh:3000/assets/ember.js?body=1:34579:54)
>     at setupContexts (http://lh:3000/assets/ember.js?body=1:33537:9)
>     at finalizeTransition (http://lh:3000/assets/ember.js?body=1:33711:9)

What do you think is going on? I can tell in the ember inspector that the data seems to load for states. Thanks so much!

You may need to use the parentheses to invoke the controller extension, like: App.StatesController = Ember.ArrayController.extend({}) Just a guess after skimming your question. — Matthew Blancarte
You are amazing, that was it! It is strange that they didn't have me do it for the first table that I added in the tutorial but yet I could still get the data to show up. Good to know that I should always throw those parentheses up on there. Thanks! — Coherent

Coherent Coherent · Accepted Answer · 2014-08-05T13:35:47

Matthew Blancarte gave the solution to this but the trick is to always add parentheses after declaring your controllers, even in coffeescript just to be safe.

App.StatesController = Ember.ArrayController.extend({})

Issue creating new route-view in Ember

1 Answers