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

我對骨幹很陌生，所以它可能違反了骨幹的本質。建議表示讚賞：Backbone.js將視圖附加到多個元素

我做了一個牆壁排序的系統。因此，有一種表單可用於在牆上發佈更新。

每個更新都可以對它們進行評論。我一次顯示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形式是一個div。有多個這樣的元素。事件處理程序會附加到所有評論表單上。但是當我使用$this=$(this.el);時，它總是引用第一個評論表單。我該如何解決這個問題。 $（this.el）應該引用評論表單的當前實例，其中事件被觸發而不是第一個

來源

2012-10-03 Somesh Mukherjee

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

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

編輯還有另一個（更好？）的方式。由於事件處理程序獲取的原始事件作爲第一個參數，您可以編寫處理postcomment這樣的：

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

然後你可以使用$(evt.srcElement)獲得實際的元素。

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

來源

2012-10-03 03:08:35 McGarnagle

當我嘗試這樣做了'evt'參數不包含srcElement，但我正要使用'evt.target'。結果發現一些瀏覽器支持'srcElement'和其他'originalElement'，所以jQuery很好地指出哪個是哪個，並在'target'中給你。 FWIW。 –

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

此外，而不是做

$this=$(this.el)

骨幹觀點已經提供包裹EL一個jQuery：

this.$el

來源

2012-10-03 06:42:50

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

回答

相關問題