I am rather new to backbone, so its possible that i am violating the very essence of backbone in doing this. Suggestions are appreciated:

I have made a wall sort of system. So there is a form that can be used to post updates on the wall.

Each update can have ments on them. I am showing 10 updates at a time. So there are 10 ment forms. So I have a view:

    CommentForm=Backbone.View.extend({
initialize:function(messageView){

},
events:{
    "submit":"postment"
},
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);
},
postment:function(){
        $this=$(this.el);

        $.post(baseUrl+"/portal/post-ment",$this.serialize(),this.showMessage,"json");
        return false;
}


   });

Now I create an instance to it as follows:

  mentFormView= new CommentForm({el:$("ment-form form")});

Note that ment-form is a div. There are multiple such elements. The event handler gets attached to all the ment forms just fine. But when I use $this=$(this.el); it always refers to the first ment form. How do I solve this. $(this.el) should refer to the current instance of ment form, where the event was triggered and not the first one

I am rather new to backbone, so its possible that i am violating the very essence of backbone in doing this. Suggestions are appreciated:

I have made a wall sort of system. So there is a form that can be used to post updates on the wall.

Each update can have ments on them. I am showing 10 updates at a time. So there are 10 ment forms. So I have a view:

    CommentForm=Backbone.View.extend({
initialize:function(messageView){

},
events:{
    "submit":"postment"
},
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);
},
postment:function(){
        $this=$(this.el);

        $.post(baseUrl+"/portal/post-ment",$this.serialize(),this.showMessage,"json");
        return false;
}


   });

Now I create an instance to it as follows:

  mentFormView= new CommentForm({el:$(".ment-form form")});

Note that .ment-form is a div. There are multiple such elements. The event handler gets attached to all the ment forms just fine. But when I use $this=$(this.el); it always refers to the first ment form. How do I solve this. $(this.el) should refer to the current instance of ment form, where the event was triggered and not the first one

• javascript
• jquery
• backbone.js

2 Answers 2

One way would be to create a new view for each element using something like this.

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

Edit There is another (better?) way. Because the event handler gets the raw event as its first parameter, you can write the handler postment like this:

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

Then you can use $(evt.srcElement) to get the actual element.

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

$('.ment-form form') will return an array of all the matching form elements. You need to iterate through that array and create a view for each element, like dbaseman showed.

Also, instead of doing

$this=$(this.el)

backbone views already provide a jquery wrapped el:

this.$el