Question

我想使用itemcontroller来呈现注释列表以及对注释执行CRUD。 CRUD 方面运行正常。但有两件事情不起作用，下面将对它们进行描述。这是 jsfiddle 。只需点击添加评论按钮，即可在现有广告下方添加其他编辑表单。

当我点击按钮创建使用CommentNewController的newComment时，它会自动在表单旁边呈现EmBlog.CommentEditController和注释编辑表单以进行新注释。两种形式都是独立的，并使用不同的控制器和模板，所以我不明白为什么渲染newComment的表单会自动为editComment添加一个空表单。
第二个问题是我有一个编辑按钮，周围是#if帮助器。如果#if帮助器为true，则应显示编辑表单。要将#if帮助器切换为true，我创建了一个包含{{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时，会创建一个新的（未保存的）注释。由于您的评论模板使用each帮助程序循环遍历所有评论，因此它会更新为具有新条目。您可以通过基于模型状态过滤列表来解决这个问题（即显示是否isNew），通过css隐藏新注释或更好地重构以显示新注释形式内联。当然评论主体是空白的，所以你通常只会看到一个新的子弹。但由于下面的问题，编辑表单也显示出来。

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

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

在此处更新了jsfiddle：http://jsfiddle.net/mgrassotti/TVe4X/1/

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

1 个答案: