ember.js - Emberjs 1.0.0-RC: itemcontroller を使用し、ルートを使用しない親子コントローラーの関係

Question

itemcontroller を使用して、コメントのリストをレンダリングし、コメントに対して CRUD を実行したいと考えています。CRUDの側面は正常に機能します。ただし、うまく機能しないことが 2 つあります。以下に説明します。ここにjsfiddleがあります。コメント追加ボタンをクリックするだけで、既存の編集フォームの下に追加の編集フォームが追加されます。

ボタンをクリックして、CommentNewController を使用する newComment を作成すると、EmBlog.CommentEditController とコメント編集フォームが新しいコメントのフォームと一緒に自動的にレンダリングされます。両方のフォームはそれぞれ独立しており、異なるコントローラーとテンプレートを使用しているため、newComment のフォームをレンダリングすると editComment の空のフォームが自動的に追加される理由がわかりません。
2 番目の問題は、#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'
});

ありがとう。

mike's answer に基づいて jsfiddle を動作させます。Emberjs1.0Rc-6 を使用するようにember-data実装を更新し、CommentNewController はここで説明されているように、 Kris Seldon のバッファリングされた保存をを回避します: イベントrootState.loaded.updated.inFlightを処理しようとしました。同じコードですが、ember-data の代わりにember-model をデータストアとして使用: http://jsfiddle.net/TVe4X/4/および Emberjs 1.0.0-RC6 と現在の ember-model を使用するように更新: http://jsfiddle.net /tHWM4/5/willSetProperty

ember.js - Emberjs 1.0.0-RC: itemcontroller を使用し、ルートを使用しない親子コントローラーの関係

1 に答える 1

Related

Reference