[英]Backbone.js attach view to multiple elements
我对骨干很新,所以我可能会违反骨干的本质。 建议表示赞赏:
我制作了一种墙式系统。 因此,有一个表单可用于在墙上发布更新。
每个更新都可以对它们发表评论。 我一次显示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)应该引用注释表单的当前实例,其中事件被触发而不是第一个
一种方法是使用类似的东西为每个元素创建一个新视图。
$(".comment-form form").each(function() {
new CommentForm( { el: $(this) } );
});
编辑还有另一种(更好的?)方式。 因为事件处理程序将原始事件作为其第一个参数,所以您可以像这样编写处理程序postcomment
:
postcomment:function(evt){
// ...
}
然后你可以使用$(evt.srcElement)
来获取实际的元素。
postcomment:function(evt){
$this = $(evt.srcElement);
// ...
}
$('。comment-form form')将返回所有匹配表单元素的数组。 您需要遍历该数组并为每个元素创建一个视图,如dbaseman所示。
而且,而不是做
$this=$(this.el)
骨干视图已经提供了一个jquery包装el:
this.$el
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.