Backbone.js将视图附加到多个元素

Question

我对骨干很新,所以我可能会违反骨干的本质.建议表示赞赏:

我制作了一种墙式系统.因此,有一个表单可用于在墙上发布更新.

每个更新都可以对它们发表评论.我一次显示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

一种方法是使用类似的东西为每个元素创建一个新视图.

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

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

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

然后你可以$(evt.srcElement)用来获得实际的元素.

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