0

我正在学习 EmberJS 并构建一个允许 1 级子评论的评论部分。我有一个列出所有评论的 Ember 视图，当您在特定评论上单击“回复”时，它应该显示一个文本区域输入，供用户编写子评论。

在我的 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>
4

1 回答 1

1

App.commentsView当前，您正在绑定作为整个容器的 showReply 。为了方便激活单个评论，我建议查看 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>
于 2012-05-15T01:21:27.630 回答