Ember render not showing rails or Ember computed properties

Question

I can't seem to get 'computed' properties from a model. In this case, I cannot get the property commented_by

My app structure is pretty simple: I have a Post model that has many comments. In the post.hbs where I display a post, I have a section that renders all comments associated with this post, like so:

        {{#each comment in comments}}
            {{render "comment" comment}}
        {{/each}}

My comment model (in Rails) is as follows:

    class Comment < ActiveRecord::Base
    extend ActsAsTree::TreeView

    belongs_to :post
    belongs_to :user

    def commented_by
        self.user.username
    end
end

And it's subsequent serializer is as follows:

class CommentSerializer < ActiveModel::Serializer
    embed :ids, include: true

  attributes  :id,
              :parent_id,
              :body,
              :created_at,
              :updated_at,
              :post_id,
              :user_id,
              :commented_by

  belongs_to :post
  belongs_to :comment
  has_many :children, include: true, root: :comments
end

Therefore I intend to serialize the commented_by 'computed property' and send it along. Now, on the client side of things:

My ember comment model is as follows:

App.Comment = DS.Model.extend({
    parentID: DS.attr('number'),
    body: DS.attr('string'),

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

    postID: DS.attr('number'),
    userID: DS.attr('number'),

    commentedBy: DS.attr('string'),

    post: DS.belongsTo('post', {async: true}),
});

I guess the route, controller and view may be relevant as well:

App.CommentRoute = Ember.Route.extend({
    model: function(params){
        return this.store.find('comment', params.id);
    },
})

App.CommentView = Ember.View.extend({
  templateName: 'comments/comment',
});

App.CommentController = Ember.ObjectController.extend({
    testProperty: "hello"
})

My questions therefore are these: 1. (main question:) Why is it that the commented_by property isn't being populated on the client side? (server side console wise it shows just fine.)

Follow up questions: 2. I have noticed that the last server call I got was GET /posts/2. Does this mean that Ember's render doesn't make a call to get the post's comments? I still have the comments showing, though, just not the commented_by property (all other properties are in the database, in columns.), so I can only guess that Ember is not going through the show action in comment_controller.rb; if so, how do I serialize the data properly to include commented_by?

3. When I put a debugger in the commentview's didinsertelement and try and fetch Comment's controller's 'testProperty', i get a null value. Does this mean that render does not show any Ember-Controller properties?

I know it's... a loaded question, but I find that I am unclear on these issues and I'm hoping someone here can help me out.

Answer 1

This is going to be a "loaded answer"... sorry :(

Your problem here is likely in that your server is not responding to Ember Data the way Ember Data expects. Because you have a relationship between comments and posts ember data needs to have both comments and posts available in the store to load the model correctly.

You have two options. Either sideload your data like explained here: http://emberjs.com/guides/models/the-rest-adapter/#toc_sideloaded-relationships.

Or do what is known as "lazy loading". Lazy loading in ember is a little bit more advanced but totally doable (and quite trivial once it "clicks"). I have an ember blog example app on github that does lazy loading. You'll see some of the challenges involved (I used ember-cli which I highly recommend).

Edit: There is a great blog post by watsonbox on github that I found very useful when making my above example. I deviated some from the example in that I injected the store directly into my adapter and handled the necessary logic for not overwriting complete data with "partial" data (read the post for an explanation of this hurdle) at this higher level of abstraction. I'd link it but stack overflow won't let me due to my limited reputation. A google search for 'emberjs lazy loading' should make his article the top google result.