CODEWITHSUNDEEP
ember.jsember-data
brg
brg

Reputation: 3953

emberjs and ember-data -creating record via form submission returns undefined

I have this jsfiddle. Everything works excepting that i can't create a new comment by submitting the comment's form. when i submit a form the console shows undefined. What I hope to achive is to grab an existing post and then create a comment that belongs to that post. So this the flow of things, a user will click on post then click a specific post title to display it and then click on add comment to comment on that post. It is important to note that at the moment, clicking on add comment button will return undefined.

Relevant section of the code with the addComment and save methods.

EmBlog.CommentNewController = Em.ObjectController.extend({

  needs: ['postsShow'],
  isAddingNew: false,

  addComment: function(body){

    post = this.get('controllers.postsShow.model');

    store = post.get('transaction');

    store.createRecord(EmBlog.Comment, {body: body});

    this.set('isAddingNew', true);
  },

 save: function(){
  console.log(this.store.commit());
 }  
});

**The relevant section from the handlebars template

<script type='text/x-handlebars' data-template-name='comment/new'>
  {{#if controller.isAddingNew}}
    <form {{action save on='submit'}}>
    {{view Ember.TextArea valueBinding="body" placeholder="body"}}
    <button type="submit"> save comment </button>  
    </form>
  {{/if}} 
  <br/>
  <div>
    <button {{action addComment}} {{bindAttr disabled="isAddingNew"}}>
      Add Comment
   </button>
 </div>
</script>

The comment form is submitted via 'posts/show template' using render

 <script type="text/x-handlebars" data-template-name="posts/show">
    <p> Comments</p>
    {{render 'comment/new' comments}}
</script>

Upvotes: 1

Views: 3098

Answers (2)

cyclomarc
cyclomarc

Reputation: 2012

Great post. Just one remark. With the latests libraries, deletePost does not work ...

Uncaught TypeError: Cannot call method 'deleteRecord' of undefined

SOLUTION:

destroyPost: function (post) {
  post.one('didDelete', this, function () {
    this.transitionTo('posts.index');
  });
  post.deleteRecord();
  post.get('transaction').commit();
}

Upvotes: 1

Teddy Zeenny
Teddy Zeenny

Reputation: 3971

You need to create the Comment record using: 

var comment = EmBlog.Comment.createRecord()

or 

var transaction = this.get('store').transaction();
var comment = transaction.createRecord(EmBlog.Comment);

You can either create the record before the user fills the form, and bind the values to that created record and only commit when the user clicks save, or you can bind the text area to a controller property, and create and commit the record after the user clicks on save.

Here's the updated fiddle with the second approach.

Upvotes: 4

Related Questions