javascript - Backbone.js 将 View 附加到多个元素

Question

我是 backbone 的新手，所以我这样做可能违反了 backbone 的本质。建议表示赞赏:

我做了一个类似墙的系统。所以有一个表格可以用来在墙上发布更新。

每次更新都可以对其进行评论。我一次显示 10 个更新。所以有 10 个意见表。 所以我有一个看法:

    CommentForm=Backbone.View.extend({
initialize:function(messageView){

},
events:{
    "submit":"postcomment"
},
showMessage:function(data){
      if(data.success)
            type="success";
               else
            type="error";
           message=data.error?data.error:"Update posted successfully";
           $messageContainer=$this.prev();
           console.log($this);
           var html="<div class='alert alert-"+type+"'>"+message+"</div>";
            $($messageContainer).html(html);
},
postcomment:function(){
        $this=$(this.el);

        $.post(baseUrl+"/portal/post-comment",$this.serialize(),this.showMessage,"json");
        return false;
}


   });

现在我为它创建一个实例，如下所示:

  commentFormView= new CommentForm({el:$(".comment-form form")});

请注意，.comment-form 是一个 div。有多个这样的元素。事件处理程序可以很好地附加到所有评论表单。但是当我使用 $this=$(this.el); 时，它总是引用第一个评论表单。我该如何解决这个问题。 $(this.el) 应该引用评论表单的当前实例，事件被触发的地方而不是第一个

Answer 1

一种方法是使用类似这样的方法为每个元素创建一个新 View 。

$(".comment-form form").each(function() {
    new CommentForm( { el: $(this) } );
});

---

编辑 还有另一种(更好的？)方法。因为事件处理程序获取原始事件作为其第一个参数，所以您可以像这样编写处理程序 postcomment:

postcomment:function(evt){
   // ...
}

然后您可以使用 $(evt.srcElement) 获取实际元素。

postcomment:function(evt){
   $this = $(evt.srcElement);
   // ...
}