2012-10-03 10 views
6

私はむしろバックボーンに新しいので、これを行う際にバックボーンの本質に違反している可能性があります。提案は感謝しています:Backbone.js複数の要素にビューを添付

私はシステムの壁の並べ替えをしました。したがって、壁に更新を投稿するために使用できるフォームがあります。

各アップデートにはコメントがあります。私は一度に10の更新を表示しています。したがって、10のコメントフォームがあります。 だから私は、ビューを持っている:.comment-フォームはdiv要素であることを

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

注:次のように

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


    }); 

は今、私はそれにインスタンスを作成します。そのような要素は複数あります。イベントハンドラはすべてのコメントフォームに正しく結び付けられます。しかし、$this=$(this.el);を使用すると、常に最初のコメントフォームが参照されます。これをどのように解決すればいいですか? $(this.el)は、イベントがトリガーされた最初のコメントフォームのインスタンスを参照する必要があります。

答えて

7

このような方法で各要素の新しいビューを作成する方法もあります。

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

編集別の(よりよい?)方法があります。

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

次に、あなたが実際の要素を取得するために$(evt.srcElement)を使用することができます。イベントハンドラは、その最初のパラメータとして、生のイベントを取得するので、あなたは、このようなハンドラpostcommentを書くことができます。

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

'evt.target'を使います。いくつかのブラウザは 'srcElement'や他の' originalElement'をサポートしているので、jQueryはどちらがどれであるかを正確に把握し、 'target'に戻します。 FWIW。 –

1

$( '。コメントフォームフォーム')は、一致するすべてのフォーム要素の配列を返します。その配列を繰り返し処理し、dbasemanのように各要素のビューを作成する必要があります。代わりに

$this=$(this.el) 

バックボーンビューを行うの

また、すでにエルラップのjQueryを提供します。私は、これは `evt`パラメータがsrcElementが含まれていませんでしみましたが、私はしていました

this.$el 
関連する問題