How to Add Child Record to Existing Parent Record?

Question

I've been googling and scouring Stack Overflow for some sort of hint on this subject but the information is scattered at best.

I'm trying to Create a new Child Record (Comment) and save it to an existing Parent Record (Post). I am using Ember-Model, rather than Ember-Data, but any tips or pointers would be greatly appreciated.

At the moment, I've been successful creating a new, embedded Comment but only when it is created with a new Post record. So:

How do I go about loading/retrieving the currently loaded Post(parent record) in order to apply Comments (child records) to it?

I've been reading up on controller dependencies, using needs: and this.controllerFor and this.modelFor in order to have access to another controller/model's content but have been unable to wire these things together into something meaningful.

Anyway, here is what I've whittled my application code down to, in the hopes I might be able to stumble into the proper way of doing this...

Routes

    App.Router.map(function() {
      this.resource('post', { path: '/:post_id' }, function() {
        this.resource('comments', { path: '/comments'} );
        });
    });

I removed all the other resources & routes, so I'm left with App.Post, App.PostIndex, and App.Comments. I think my routes are the issue here, I assume I'm not properly implementing the methods to use the loaded Post record in my Comments route.

    App.IndexRoute = Ember.Route.extend({
      model: function() {
        return App.Post.find();
      },

      setupController: function(controller, model) {  // I'm not certain if this
        controller.set('content', model);           // setupController is needed?
      }

    });

    App.PostRoute = Ember.Route.extend({
      model: function(params) {
        return App.Post.find(params.post_id);
      },

      setupcontroller: function( controller, model) { // again, unsure if this
          this.controllerFor('post').get('comments'); // is correct.
            controller.set('content', comments);
      }

    });

    App.CommentsRoute = Ember.Route.extend({
      afterModel: function() {
          this.set('post', this.modelFor('post'));
        },

      setupcontroller: function( controller, model) {
          this.controllerFor('post').get('comments');
            controller.set('content', comments);
        }

    });

Controller

App.CommentsController = Ember.ArrayController.extend({
  needs: "post",

  actions: {

     addComment: function() {
          var post = App.Post.create({
            title: 'static post title'
          });

              post.get('comments').create({
                message: 'static message'
            });

              post.save();

      }

  }

});

This is my current Comments Controller, which can create a new Post with an embedded Comment. I've found and been given numerous examples in which to create the Comment, but none seem to work for me. Basically, I'm struggling with defining the var post = ... as the currently loaded record. I've implemented various approaches in an attempt at trial & error. Thus far I have attempted:

var post = App.Post.create();, returns property undefined, as this would create a new record. However, I gave it a shot as every example i saw related to this defined their record as such.
var post = this.get('post');, returns a cannot call 'get' on undefined. I've tried using this method of defining my current post on both the Comments controller and Post controller.
var post = this.get('controllers.post.content);, returns a 'cyclic error' from the backend I'm using.
var post = App.Post.find();, returns a cannot call 'get' on undefined.
var post = App.Post.find(1);, Again, returns a cannot call 'get' on undefined. Figured I'd give it a shot because this is one of those recurring examples people provide. The backend I use applies its own ID to each record, and I'm unsure if I would be able to/how to have the .find() method use a dynamic ID value and retrieve only the model I just loaded.

I'm guessing that I'm not properly setting up my Routes and Controller dependencies?

If anyone has a suggestion, relevant link, or fix I would be very grateful.

This one (seemingly simple) issue/use case has me at wit's end at this point.

chopper chopper · Accepted Answer · 2013-09-20T18:34:10

Try this (works pre beta 2):

App.CommentsController = Ember.ArrayController.extend({
  actions: {
     addComment: function() {
        this.content.createRecord({
            message: 'static message'
        });   
     }
  }
});

Ember Data Beta 2 and later:

App.CommentsController = Ember.ArrayController.extend({
  needs: ["post"],
  actions: {
     addComment: function() {
        var post = this.get('controllers.post');
        var comment = this.get('store').createRecord('comment', {
            message: 'static message',
            post: post
        }); 
        comment.save().then(function() {
            post.addObject(comment);
            // You may or may not need to save your post, too. In my case my backend handles 
            // the inverses of relationships (if existing), so there's no need. We still need 
            // to do this for Ember, though

        });      
     }
  }
});

How to Add Child Record to Existing Parent Record?

Routes

Controller

1 Answers