我的視圖中的Backbone.js事件被多次觸發

Question

我可能對如何實現backbone.js有誤解，因為我支持多個模型的所有視圖（例如，可以顯示多個產品的“產品”視圖）都會將事件發送到在其中創建的每個視圖會話。

因此，在下面的示例中，當我單擊#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

從我的實踐來看，使用多個模型處理視圖的最佳方法是使用兩種視圖：

• 父視圖（使用Collection作為模型） - 將其視為<ul>
• 子視圖（使用集合中的模型） - 將其視為<li>

您的父視圖呈現所有子視圖並觀察集合更改。

每個子視圖都將其范圍限制為li元素，因此模型上的每個事件（其視圖）都是單獨處理的。

它更易於維護，更清晰，並且可以更好地概述模型 - 視圖關系。

Answer 3

用類“.redirect_product”替換id“#redirect_product”然后你可以在頁面上有很多。

在骨干視圖中大多數時候我只使用類。 很少是id。 鑒於骨干有一個發現者

this.$(".redirect_product")

如果該類也存在於視圖范圍之外的另一個元素上，那么只在視圖范圍內搜索您不需要太在意。