我对骨干很新,所以我可能会违反骨干的本质.建议表示赞赏:
我制作了一种墙式系统.因此,有一个表单可用于在墙上发布更新.
每个更新都可以对它们发表评论.我一次显示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); // ... }