Emberjs 1.0.0-RC: Parent-child controller relationships using itemcontroller and without using routes

Question

I want to use itemcontroller to a render a list of comments as well as perfom CRUD on the comment. The CRUD aspect works fine. But there are two things not working wekll and they are described below. Here is the jsfiddle. Just click on the add Comment button to see it add an additional edit form underneath the existing one.

When I click on the button to create newComment which uses the CommentNewController, it automatically also renders EmBlog.CommentEditController and comment edit form along side the form for new comment. Both forms are independent of each and use different controllers and templates, so I don't understand why rendering the form for newComment automatically adds an empty form for editComment.
The second issue is that I have an edit button which is surrounded by an #if helper. If the #if helper is true then the edit form should be displayed. To toggle the #if helper to true, I created a button that contains the {{action editComment }}. When I click the button, the edit form is not rendered. But note that, when the template first renders, it automatically displays an edit form, even when the edit button has not been clicked.

Relevant template and controllers ares pasted below.

It is when the post/show template renders that an edit form is automatically displayed without waiting for an edit button to be clicked, which sets the #if helper to true

<script type="text/x-handlebars" data-template-name="posts/show"> 
   //displays the add button link
    {{render 'comment.New' }} 
   <br/>

  **render the comments and use CommentEdit as itemController**
  {{render 'comments' comments}}
 </script>

Comments Template

  <script type='text/x-handlebars' data-template-name='comments'>
    <ul>
      {{#each controller  itemController="CommentEdit"}}
    <li>{{body}}</li><br/>
      {{partial 'comment/edit'}} 
    {{/each}}
   </ul>  
 </script>

It seems this #if helper is bye-passed as the form is rendered without clicking edit button and when you click edit button, it does nothing

<script type='text/x-handlebars' data-template-name='comment/_edit'>
 {{#if controller.editComment}}
   {{#if model}}
     <form {{action save content on='submit'}}>
      {{view Ember.TextArea valueBinding="content.body" placeholder="body"}}
     <button type="submit"> save comment </button>  
     <button {{action cancel content}}> Cancel</button>
    </form>
  {{/if}}
{{/if}}
<br/>
<div>
  <button {{action editComment }} {{bindAttr disabled="isEditingComment"}}> Edit Comment</button>

When you click on the addComment button, it adds a new empty edit form but it shouldn't even be calling the edit form

 <script type='text/x-handlebars' data-template-name='comment/new'>
   {{#if controller.isAddingNew}}
    {{partial 'comment'}} 
   {{/if}} 
  <div>
   <button {{action addComment}} {{bindAttr disabled="isAddingNew"}}>Add Comment</button>
 </div>
</script>

The comment partial for adding new comment

 <script type='text/x-handlebars' data-template-name='_comment'>
  <form {{action save content on='submit'}}>
  <button {{action cancel content}}> Cancel</button>
  </form>
 </script>

The controllers

EmBlog.CommentNewController = Em.ObjectController.extend({
   needs: ['postsShow'],
   isAddingNew: false,

   addComment: function(){ 
    this.set('isAddingNew', true);
   }  
 });

 EmBlog.CommentEditController = Em.ObjectController.extend({
   isEditingComment: false,

   editComment: function() {
    this.set('isEditingComment', true);
  }
});

EmBlog.CommentsController = Em.ArrayController.extend({
 needs: ['postsShow'],
 itemController: 'CommentEdit'
});

Thanks.

working jsfiddle based on mike's answer. Update the ember-data implementation to use Emberjs1.0Rc-6 and the CommentNewController now using Kris Seldon's buffered save as explained here, to avoid error: Attempted to handle event willSetProperty rootState.loaded.updated.inFlight. Thesame code but using ember-model as datastore instead of ember-data: http://jsfiddle.net/TVe4X/4/ and updated to use Emberjs 1.0.0-RC6 and current ember-model : http://jsfiddle.net/tHWM4/5/

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-05-25T02:56:17

When I click on the button to create newComment which uses the CommentNewController, it automatically also renders EmBlog.CommentEditController and comment edit form along side the form for new comment. Both forms are independent of each and use different controllers and templates, so I don't understand why rendering the form for newComment automatically adds an empty form for editComment.

When you click newComment, a new (unsaved) comment is created. Since your comments template uses the each helper to loop over all comments, it is updated to have a new entry. You could get around this by filtering the list based on model state (ie show if isNew), hiding new comments via css or better yet refactor to show the new-comment-form inline. Of course the comment body is blank so you normally would just see a new bullet. But the edit form shows up as well, because of the issue below.

The second issue is that I have an edit button which is surrounded by an #if helper. If the #if helper is true then the edit form should be displayed. To toggle the #if helper to true, I created a button that contains the {{action editComment }}. When I click the button, the edit form is not rendered. But note that, when the template first renders, it automatically displays an edit form, even when the edit button has not been clicked.

Agreed the {{#if editComment}} helper is not working - it always evaluates to true. This is because editComment is a function not a property. Instead you probably want to reference the property isEditingComment.

Updated jsfiddle here: http://jsfiddle.net/mgrassotti/TVe4X/1/

Emberjs 1.0.0-RC: Parent-child controller relationships using itemcontroller and without using routes

1 Answers