我的视图中的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')});

一旦每个产品都有自己的范围,那么事件将按预期工作.