Backbone.js collega la vista a più elementi

Question

Sono piuttosto nuovo alla dorsale, quindi è possibile che io stia violando l'essenza stessa della dorsale nel farlo. I suggerimenti sono apprezzati:

Ho realizzato un sistema di tipo di muro. Quindi c'è un modulo che può essere usato per pubblicare aggiornamenti sul muro.

Ogni aggiornamento può contenere commenti su di essi. Sto mostrando 10 aggiornamenti alla volta. Quindi ci sono 10 moduli di commento. Così ho vista:

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; 
} 


    }); 

Ora creare un'istanza ad esso come segue:

commentFormView= new CommentForm({el:$(".comment-form form")}); 

noti che .comment-forma è un div. Ci sono molti di questi elementi. Il gestore eventi viene collegato a tutti i moduli di commento correttamente. Ma quando uso $this=$(this.el); si riferisce sempre al primo modulo di commento. Come lo risolvo. $ (this.el) dovrebbe fare riferimento all'istanza corrente del modulo di commento, dove l'evento è stato attivato e non il primo

Answer 1

Un modo sarebbe creare una nuova vista per ogni elemento utilizzando qualcosa di simile.

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

---

Modifica c'è un altro (meglio?) Modo. Poiché il gestore di eventi riceve l'evento grezzo come primo parametro, è possibile scrivere il gestore postcomment in questo modo:

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

quindi è possibile utilizzare $(evt.srcElement) per ottenere l'elemento effettivo.

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

Answer 2

$ ('. Modulo di commento-modulo') restituirà un array di tutti gli elementi del modulo corrispondenti. È necessario scorrere questa matrice e creare una vista per ciascun elemento, come mostrato da Dbaseman.

Inoltre, invece di fare

$this=$(this.el) 

vista dorsale già fornire una jquery avvolto el:

this.$el