error while loading route: - why am I not retrieving data form rails?

Question

I'm trying to set up the basics of an application using Ember on Rails, and I'm getting this error:

Error while processing route: posts

It would be helpful if Ember said something about the error, but it hasn't. Here is the code in question (I believe I am including all parts needed).

// PostsRoute

App.PostsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('post');
        // return [{title: 'fixture'}, {title: '2'}]
    }

})

// Router.

App.Router.map(function() {
  // location: 'auto',
  // rootURL: '/',
  this.resource('posts', { path: '/' })

});

// Routes.rb
  resources :posts do 
    resources :comments
  end

// Post model - Ember
App.Post = DS.Model.extend({
    title: DS.attr('string'),
    description: DS.attr('string'),

    imageFileName: DS.attr('string'),
    imageContentType: DS.attr('string'),
    imageFileSize: DS.attr('number'),
    imageUpdatedAt: DS.attr('date'),

    createdAt: DS.attr('date'),
    updatedAt: DS.attr('date'),

    userId: DS.attr('number'),
});


// Posts controller.rb

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  respond_to :html

  def index
    @posts = Post.all
    puts "in PostsController index. "
    puts @posts
    respond_with(@posts)
  end

  ...

// Post Serializer
class PostSerializer < ActiveModel::Serializer
  attributes :id, :title, :description, :created_at, :updated_at, :user_id, :image_file_name, :image_content_type, :image_file_size, :image_updated_at
end

I'm trying to understand what needs to be set up for Ember to receive data from the Rails API. Rails-wise, it's returning data fine.

From what I understand, here is how the app goes. Ember checks the route (here, PostsRoute) first. The route is expected to have a 'model', so it looks at the Model property. Here, the model property makes a call to the Store to get all posts. ie this.store.find('post'). [replacing this call with a static array seems to work fine.]

This makes a call to the Rails PostsController's index function. I can confirm that this function is reached because of the print statements I put there. The index function returns a variable with the activerecord post models.

From here, the posts need to be JSON-ified for Ember to be able to use it. So they are put through a serializer, which, here, is post_serializer.rb. This decides what properties to send as JSON form.

I suspect that there is some issue with the way I am handling this serialization part, since I have confirmed that the posts have actually been fetched in the index function of PostsController.rb, but have failed (I believe) to make the journey back to Ember.

What I don't understand is why. What is it that I'm missing?

If it is any issue, there are some has_many relationships I have not included yet because I first wanted to get this going. And for completeness, here is the full error as per chrome's console:

Error while processing route: posts ember.js?body=1:15376
logToConsole ember.js?body=1:15376
logError ember.js?body=1:26315
defaultActionHandlers.error ember.js?body=1:26272
triggerEvent ember.js?body=1:26363
trigger ember.js?body=1:46876
Transition.trigger ember.js?body=1:46721
(anonymous function) ember.js?body=1:46526
tryCatch ember.js?body=1:47310
invokeCallback ember.js?body=1:47322
publish ember.js?body=1:47293
publishRejection ember.js?body=1:47235
(anonymous function) ember.js?body=1:29438
DeferredActionQueues.invoke ember.js?body=1:682
DeferredActionQueues.flush ember.js?body=1:752
Backburner.end ember.js?body=1:138
Backburner.run ember.js?body=1:193
run ember.js?body=1:18226
hash.error ember-data.js?body=1:1886
fire jquery.js?body=1:3120
self.fireWith jquery.js?body=1:3232
done jquery.js?body=1:9278
callback jquery.js?body=1:9686

Answer 1

The promise returned by your model hook is rejecting. To found out why, replace the code in your model hook with this:

App.PostsRoute = Ember.Route.extend({
  model: function () {
    return this.store.find('post').catch(function (error) {
      debugger;
    });
  }
});

When you load the route in your browser, the debugger call will pause execution, and allow you to look at the error being reported. Ideally, the error will contain the answer to your question of why things aren't working.