Backbone.js將視圖附加到多個元素

Question

我對骨干很新，所以我可能會違反骨干的本質。 建議表示贊賞：

我制作了一種牆式系統。 因此，有一個表單可用於在牆上發布更新。

每個更新都可以對它們發表評論。 我一次顯示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）應該引用注釋表單的當前實例，其中事件被觸發而不是第一個

Answer 1

一種方法是使用類似的東西為每個元素創建一個新視圖。

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

---

編輯還有另一種（更好的？）方式。 因為事件處理程序將原始事件作為其第一個參數，所以您可以像這樣編寫處理程序postcomment ：

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

然后你可以使用$(evt.srcElement)來獲取實際的元素。

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

Answer 2

$（'。comment-form form'）將返回所有匹配表單元素的數組。 您需要遍歷該數組並為每個元素創建一個視圖，如dbaseman所示。

而且，而不是做

$this=$(this.el)

骨干視圖已經提供了一個jquery包裝el：

this.$el