Emberjs 1.0.0-RC：使用 itemcontroller 和不使用路由的父子控制器关系

Question

我想使用 itemcontroller 来呈现 cmets 列表以及对评论执行 CRUD。 CRUD 方面工作正常。但是有两件事不能正常工作，下面将对其进行描述。这是jsfiddle。 只需点击 add Comment 按钮，即可在现有的下方添加一个额外的编辑表单。

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

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

下面粘贴了相关的模板和控制器。

当 post/show 模板呈现时，编辑表单会自动显示，而无需等待单击编辑按钮，这会将 #if 帮助器设置为 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>

评论模板

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

这个#if 助手似乎被绕过了，因为表单在没有点击编辑按钮的情况下被渲染，当你点击编辑按钮时，它什么也不做

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

当您单击 addComment 按钮时，它会添加一个新的空编辑表单，但它甚至不应该调用编辑表单

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

用于添加新评论的评论部分

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

控制器

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'
});

谢谢。

working jsfiddle based on mike's answer。更新 ember-data 实现以使用 Emberjs1.0Rc-6 和 CommentNewController 现在使用 Kris Seldon's 缓冲保存，如 here 解释的那样，以避免 错误：尝试处理事件 willSetProperty rootState.loaded.updated.inFlight。相同的代码，但使用 ember-model 作为数据存储 而不是 ember-data：http://jsfiddle.net/TVe4X/4/ 并更新为使用 Emberjs 1.0.0-RC6 和当前的 ember-model：http://jsfiddle.net/tHWM4/5/

Answer 1

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

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

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

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

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