Backbone.js如何将视图附加到多个元素上？

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) 应该引用触发事件的当前评论表单实例，而不是第一个实例。

- SoWhat

Answer 1

一种方法是使用类似以下方式为每个元素创建一个新视图。

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

---

编辑 还有一种（更好的？）方法。因为事件处理程序会将原始事件作为其第一个参数，所以您可以像这样编写处理程序postcomment：

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

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

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

- McGarnagle

---

当我尝试这个时，evt参数中并没有包含srcElement，但我可以使用evt.target。结果发现，一些浏览器支持srcElement，而另一些则支持originalElement，所以jQuery很好地解决了这个问题，并将其返回给你的target。顺便说一下。 - George Mandis

Answer 2

$('.comment-form form')会返回所有匹配表单元素的数组。您需要遍历该数组并为每个元素创建一个视图，就像dbaseman所展示的那样。

此外，不要使用

$this=$(this.el)

Backbone视图已经提供了一个jQuery包装的el：

this.$el

- Cezary Wojtkowski