私のビュー内のBackbone.jsイベントが複数回トリガされる

Question

backbone.jsを実装する方法について誤解があるかもしれません。複数のモデルをサポートするすべてのビュー（たとえば、複数のモデルを表示できる「Product」ビュー製品）は、そのセッションで作成されたすべてのビューにイベントを送信します。

以下の例では、＃redirect_productリンクをクリックすると、見た商品の数に応じて「redirect_product」が複数回呼び出されます。私が5つの製品を見た場合、6回目のクリックで6つの警告が表示されます。

ここでは何が起こっていますか？私の練習から

505  /****************PRODUCT VIEW****************/ 
    506  App.Views.Product = Backbone.View.extend({ 
    507   el: $('#content_sec'), 
    508 
    509   events: { 
    510    "click #redirect_product": "redirect_product", 
    511   }, 
    512 
    513   initialize: function(options) { 
    514    this.model = this.options.model; 
    515    this.render(); 
    516 
    517   }, 
    518 
    519   render: function() { 
    520    $(this.el).empty(); 
    521    $('#product_detail_template').tmpl(this.model.toJSON()).appendTo($(this.el)); 
    522 
    523 
    524    //Activate facebook buttons 
    525    if (typeof FB != "undefined"){ 
    526       FB.XFBML.parse(document.getElementById('item_share')) 
    527    } 
    528 
    529    wishlist.init(); 
    530    return this; 
    531   }, 
    532 
    533   redirect_product: function() { 
    534    //Send data on what product being clicked by whom 
    535    alert('hi'); 
    536 
    537 
    538    //Open new window with product for user 
    539    var external_link = this.model.get('product').attributes['External Link']; 
    540    window.open(external_link, "external_site"); 
    541 
    542   }, 
    543  }); 

Answer 1

問題は、あなたのすべてのビューに同じelを使用していると思います。

新しいプロダクトを作成し、このような何か：各製品たら

$('#content_sec').append('<div class="productView"></div>'); 
var product = new Product(); 
var view = new ProductView({model: product, el: $('.productView:last')}); 

は独自のスコープを持って予想通り、その後のイベントが動作します。

Answer 2

は、複数のモデルと意見を処理するための最良の方法は、ビューの2種類持つことです。（モデルとしてコレクション）

• 親ビューを - <ul>
と考えます（コレクションからのモデルと）
• 子ビュー - あなたの親ビューは、すべての子ビューをレンダリングしCollecを観察<li>

と考えます変化する。

それぞれの子ビューはスコープをli要素に限定しているため、モデル（ビュー）の各イベントは個別に処理されます。

モデルビューの関係については、メンテナンスやクリーナーの方が簡単です

Answer 3

id "#redirect_product"をクラス ".redirect_product"に置き換えてください。次に、そのページに多くのものを置くことができます。

ほとんどの場合、バックボーンビューでは私はクラスだけを使用します。非常にまれにidです。バックボーンが唯一のあなたはクラスが また、ビューの範囲外の別の要素の上に存在した場合あまり気にする必要はありませんビューのスコープ内で検索ファインダー

this.$(".redirect_product") 

を持っていることを考えます。