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

我对骨干很新，所以我可能会违反骨干的本质。 建议表示赞赏：

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

每个更新都可以对它们发表评论。 我一次显示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="
"+message+"
"; $($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); // ... } 

Answer 2

$（’。comment-form form’）将返回所有匹配表单元素的数组。 您需要遍历该数组并为每个元素创建一个视图，如dbaseman所示。

而且，而不是做

 $this=$(this.el) 

骨干视图已经提供了jquery包装el：

 this.$el