在EmberJS我的事件觸發所有的子視圖，而不是隻有目標的一個

Question

我正在學習EmberJS和建立一個評論部分，允許1級別的評論。我有一個Ember視圖列出了所有的評論，當你點擊一個特定評論的「回覆」時，它應該顯示一個textarea輸入，供用戶編寫一個子評論。

在我的EmberJS代碼中，當你點擊「回覆」時，它會顯示所有註釋的textarea輸入，而不僅僅是特定的註釋。任何意見，將不勝感激:)

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

目前你要綁定的showReply到App.commentsView這是整個容器。爲了使其更容易激活單個評論，我建議您查看一個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>