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

我对骨干很陌生，所以它可能违反了骨干的本质。建议表示赞赏：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="<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形式是一个div。有多个这样的元素。事件处理程序会附加到所有评论表单上。但是当我使用$this=$(this.el);时，它总是引用第一个评论表单。我该如何解决这个问题。 $（this.el）应该引用评论表单的当前实例，其中事件被触发而不是第一个

来源

2012-10-03 Somesh Mukherjee

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

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

编辑还有另一个（更好？）的方式。由于事件处理程序获取的原始事件作为第一个参数，您可以编写处理postcomment这样的：

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

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

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

来源

2012-10-03 03:08:35 McGarnagle

当我尝试这样做了'evt'参数不包含srcElement，但我正要使用'evt.target'。结果发现一些浏览器支持'srcElement'和其他'originalElement'，所以jQuery很好地指出哪个是哪个，并在'target'中给你。 FWIW。 –

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

此外，而不是做

$this=$(this.el)

骨干观点已经提供包裹EL一个jQuery：

this.$el

来源

2012-10-03 06:42:50

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

回答

相关问题