针对单击的元素构建和渲染主干视图

Question

您好，我遇到了骨干 js 的问题

我有一个评论视图

class window.CommentView extends Backbone.View
  el: $('.comment')
  initialize: ->
    @$el.show()
  events:
    "click": "renderCommentBoxView"

  renderCommentBoxView: ->
    @commentBoxView = new CommentBoxView
      id: this.$('.comment')['context']['activeElement']['id']
      model: new Item
      el: @el

还有一个 cmets 框视图

 class window.CommentBoxView extends Backbone.View
   el: $('.commentBoxMain')

   events:
     "click.comment": "showCommentBox"
     "click document": "stopEvent"
     "click .login_button": "submitComment"
   initialize: ->
     @showCommentBox()

   stopEvent: (event) ->
     event.stopPropagation()

  showCommentBox: ->
     $(@el).append('<textarea class=\'commentBox\'></textarea><br/><input type=\'button\' class=\'login_button\' name=\'Add a comment\' value=\'Add a comment\'><span class=\'loading\' style=\'display: none;\'>Loading...</span>')

现在，用户可以评论多个项目。因此，每当单击评论按钮时，我都会呈现一个名为 CommentBoxView 的新视图，用于定义元素和模型

问题是我无法获取视图应该绑定到的当前单击元素。

我的 HTML 示例如下所示：

   <div id="item_1">
     <a class="comment" href='javascript:void(0)'>Comment</a>
     <div class="commentMainBox"></div>
   </div>
  <div id="item_2">
    <a class="comment" href='javascript:void(0)'>Comment</a>
    <div class="commentMainBox"></div>
  </div>

每当点击评论链接时，我都会构建 html 并将其转储到 commentMainBox 中。 但问题是单击的元素始终是我页面上带有类注释的第一个元素。如何获取当前点击的元素，以便在正确的 div 中呈现内容。

CommentBoxView 的元素也应该是el: $('.commentBoxMain')，但是如果我分配它，那么我在视图中什么都没有呈现，但是当我初始化为el: $('.comment') 时，我看到了评论框，但它总是在第一个评论下呈现无论点击的是哪一个。

我哪里错了？

Answer 1

您不应该将@el 从CommentView 传递给它实例化的CommentBoxView；在CommentBoxView 类中声明el: $('.commentBoxMain') 也不起作用。正如 Backbone.js 文档所说：

如果您想创建一个引用 DOM 中已有元素的视图，请将元素作为选项传入：new View({el: existingElement})

否则，View 会尝试创建一个新元素。所以你要做的是：

@commentBoxView = new CommentBoxView
  model: new Item
  el: @$('.commentMainBox')

这将在 Comment 视图中找到 commentMainBox 元素（因为 @$ 的范围在其元素内）并将其作为 CommentBoxView 的元素提供。