Javascript “我的视图”中的Backbone.js事件被多次触发

我可能对如何实现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     });

---

根据我的实践，使用多个模型处理视图的最佳方法是使用两种视图：

• 父视图（以集合为模型）-将其视为

• 子视图（使用集合中的模型）-将其视为

父视图呈现所有子视图并观察集合更改

每个子视图都将其范围限制为

li

元素，因此模型（其视图）上的每个事件都是单独处理的

它更易于维护、更清晰，并且可以更好地概述模型-视图关系

将id“#redirect_product”替换为一个类。redirect_product”这样你就可以在页面上看到很多

大多数时候，在主干视图中，我只使用类。很少有身份证。因为主干有一个查找器

this.$(".redirect_product")

它只在视图的范围内搜索，您不需要太在意类是否为

---

也存在于视图范围之外的另一个元素上。

我认为，问题在于您对所有视图使用相同的

el

创建新产品时，请执行以下操作：

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

$（'content#u sec'）。追加（''；
var product=新产品（）；
var view=newproductview（{model:product，el:$（'.ProductView:last'）}）；

---

一旦每个产品都有自己的作用域，那么事件将按预期工作。

页面上是否多次出现“重定向”产品id？如果是，这些产品视图实例中的每一个都会认为它们需要处理事件。重定向产品id在视图中只出现一次。但是，每个产品视图将有一个重定向产品id的实例。如何阻止其他视图响应单击事件？您需要研究此链接：。我相信你的问题在于你对el的治疗。您的事件不在其产品模板的范围内。DevX在正确的轨道上：每个项都需要一个唯一的ID。您可以通过重写构造函数或在初始化过程中设置它，然后重新调用“this.delegateEvents（）”，将它们附加到正确的ID来设置它。您是正确的elf。我根据每个产品的slug在构造函数中添加了一个唯一的id。工作得很有魅力。