1

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.

  1. 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.

  2. 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/

4

1 回答 1

1

当我单击按钮创建使用 CommentNewController 的 newComment 时，它还会自动在表单旁边呈现 EmBlog.CommentEditController 和评论编辑表单以获取新评论。两种表单都相互独立，并且使用不同的控制器和模板，所以我不明白为什么为 newComment 呈现表单会自动为 editComment 添加一个空表单。

当您单击 newComment 时，会创建一个新的（未保存的）评论。由于您的评论模板使用each帮助器循环所有评论，因此更新它以具有新条目。您可以通过基于模型状态过滤列表（即显示 if isNew）、通过 css 隐藏新评论或更好地重构以显示新评论表单内联来解决此问题。当然，评论正文是空白的，因此您通常只会看到一个新项目符号。但是由于以下问题，编辑表单也会显示出来。

第二个问题是我有一个被#if 助手包围的编辑按钮。如果#if 助手为真，则应显示编辑表单。为了将#if 助手切换为真，我创建了一个包含{{action editComment }} 的按钮。当我单击按钮时，不会呈现编辑表单。但请注意，当模板第一次呈现时，它会自动显示一个编辑表单，即使没有单击编辑按钮也是如此。

同意{{#if editComment}}助手不工作 - 它总是评估为真。这是因为editComment是函数而不是属性。相反，您可能想要引用该属性isEditingComment。

在这里更新了 jsfiddle：http: //jsfiddle.net/mgrassotti/TVe4X/1/

于 2013-05-25T02:56:17.330 回答