EmberJSでは、私のイベントが対象のものだけではなく、すべてのサブビューをトリガーします

Question

私はEmberJSを学び、1レベルのサブコメントを可能にするコメントセクションを構築しています。私はすべてのコメントを記載したEmber Viewを持っています。特定のコメントで「返信」をクリックすると、ユーザーがサブコメントを書くためのテキストエリアの入力が表示されます。

EmberJSコードで「返信」をクリックすると、特定のコメントだけでなくすべてのコメントのテキストエリアの入力が表示されます。何かアドバイスをいただければ幸いです:)

// View 
App.commentsView = Em.View.create({ 
templateName: 'commentsTmpl', 
showReply: false, 

reply: function(e) { 
    e.view.set('showReply', true); 
    e.preventDefault(); 
} 
}); 

App.replyCommentsView = Em.View.extend({ 
showReplyBinding: 'App.commentsView.showReply' 
}); 

// Template 
<script data-template-name="commentsTmpl" type="text/x-handlebars"> 
</h2>comment</h2> 
{{#each App.commentsController}} 
<div class="comment-group clearfix"> 
    <div class="comment"> 
    <img class="comment-pic" {{bindAttr src="userPic"}} alt="user pic"> 
    <div class="comment-content"> 
     <a href="#" class="comment-username">{{userName}}</a> 
     <span class="comment-body">{{text}}</span> 
     <div class="comment-actions clearfix"> 
      <a href="#" {{action "reply"}}>Reply</a> 
     </div> 
    </div> 
    </div> 
{{#view App.replyCommentsView}} 
    {{#if showReply}} 
    <div class="comment-reply"> 
    <h2>sub-comment</h2> 
    <textarea class="txt-comment-reply" rows="2" cols="65"></textarea> 
    </div> 
    {{/if}} 
{{/view}} 
</div> 
    {{/each}} 
</script> 

Answer 1

現在、あなたは全体のコンテナですApp.commentsViewにshowReplyを結合しています。 1つのコメントを簡単にアクティブにするには、CollectionViewを調べることをお勧めします。それぞれのコメントには独自のビューがあり、個々のコメントのビューにはshowReplyを切り替えることができます。

このような何か：（申し訳ありませんが、私はそれをテストしていない）

App.commentsView = Em.View.create({ 
    templateName: 'commentsTmpl' 
}); 

App.CommentView = Em.View.extend({ 
    classNames: "comment-group clearfix".w(), 
    showReply: false, 

    reply: function(e) { 
    e.preventDefault() 
    this.set("showReply", true) 
    } 
}) 

// Template 
<script data-template-name="commentsTmpl" type="text/x-handlebars"> 
    </h2>comment</h2> 
    {{#collection contentBinding="App.commentsController" itemViewClass="App.CommentView"}} 
     <div class="comment"> 
     <img class="comment-pic" {{bindAttr src="content.userPic"}} alt="user pic"> 
     <div class="comment-content"> 
      <a href="#" class="comment-username">{{content.userName}}</a> 
      <span class="comment-body">{{content.text}}</span> 
      <div class="comment-actions clearfix"> 
      <a href="#" {{action "reply"}}>Reply</a> 
      </div> 
     </div> 
     </div> 
     {{#if showReply}} 
     <div class="comment-reply"> 
     <h2>sub-comment</h2> 
     <textarea class="txt-comment-reply" rows="2" cols="65"></textarea> 
     </div> 
     {{/if}} 
    {{/each}} 
</script>