Ember.js Railscast＃410未定义不是函数TypeError：在RandomRaffle.EntriesRoute.Ember.Route.extend.setupController

Question

I'm following the Ember.js Railscast episode 410. When I change my router.js file from

RandomRaffle.EntriesRoute = Ember.Route.extend({
  setupController: function (controller) {
    controller.set('content', []);
  }

});

to this

RandomRaffle.EntriesRoute = Ember.Route.extend({
  setupController: function (controller) {
    controller.set('content', RandomRaffle.Entry.find());
  }

});

I get the error:

Error while processing route: entries undefined is not a function TypeError: undefined is not a function at RandomRaffle.EntriesRoute.Ember.Route.extend.setupController

My models/entry.js file contains:

RandomRaffle.Entry = DS.Model.extend({
  name: DS.attr('string'),
  winner: DS.attr('boolean')
});

My controllers/entries_controller.js contains:

RandomRaffle.EntriesController = Ember.ArrayController.extend({
// newEntryName: "",

  actions: {

    addEntry: function () {
      RandomRaffle.Entry.createRecord({name: this.get('newEntryName')});
      this.set('newEntryName', "");
    },

    drawWinner: function () {
      this.setEach('highlight', false);
      var pool = this.rejectBy('winner');
      if (pool.length > 0){
        var entry = pool[Math.floor(Math.random() * pool.length)];
        entry.set('winner', true);
        entry.set('highlight', true);
        this.get('store').commit();
      }
    }

  }
});

javascripts/store.js

RandomRaffle.Store = DS.Store.extend({});

// Override the default adapter with the `DS.ActiveModelAdapter` which
// is built to work nicely with the ActiveModel::Serializers gem.
RandomRaffle.ApplicationAdapter = DS.ActiveModelAdapter.extend({});

What am I missing?

Answer 1

Providing your store is properly defined, you should create a model function in your route , similar to this:

RandomRaffle.EntriesRoute = Ember.Route.extend({
  model: function() {
       return RandomRaffle.Entry.find(); 

       // This is deprecated. Latest versions of ember-data use the following:
       // return this.store.find('entry');

       // this method returns a promise that will
       // carry the model data once it resolves
       // This is internally passed as a param of `setupController`
  },
  setupController: function (controller, model) {

       controller.set('content', model);
       // this is the same as the default implementation, so if you're *NOT* doing
       // anything different than this, get rid of `setupController` altogether

       // the `model` param, is the return of the `model` function just above. 
       // It is returned a `promise` rather than data, and will be made 
       // available once the promise is resolved, materializing the records 

       // the param doesn't have to be called `model`, but the 
       // function above *HAS* to be named `model` 
  }

});

I am not 100% sure, but I believe the error may be happening because you are calling RandomRaffle.Entry.find() when it should be this.store.find('entry')

Answer 2

The models/entry.js and store.js files are correct in the original question. Plus...

router.js

RandomRaffler.EntriesRoute = Ember.Route.extend({

    model: function() {
       return this.store.find('entry');
   }
});

entries_controller.js

RandomRaffler.EntriesController = Ember.ArrayController.extend({

actions: {
    addEntry: function(name) {
        //Create the entry record
        var entry = this.store.createRecord('entry', {
            name: name,
            winner: false
        });
        // Save the changes
        entry.save();           
    },

Also you may notice in your rails server log that there is a problem with the csrf token, this can be fixed by placing this code in the first few lines of the rails controller file (eg entries_controller.rb)

skip_before_action :verify_authenticity_token

A full working app of the Railscast project can be found at https://github.com/markwiggles/raffler