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

我可能对如何实现backbone.js有误解，因为我所有支持多个模型的视图（例如，可以显示多个模型的“Product”视图产品）会将事件发送到在该会话中创建的每个视图。我的视图中的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  });

来源

2011-06-19 DevX

#redirect_product ID是否在页面上多次出现？如果是这样，似乎每个产品视图实例都会认为他们需要处理该事件。 –

redirect_product id在视图中只出现一次。但是每个产品视图都会有一个redirect_product id实例。如何停止响应点击事件的其他视图？ – DevX

你需要研究这个链接：http://documentcloud.github.com/backbone/docs/todos.html。我相信你的问题在于你对el的治疗。您的活动不在其产品模板范围内。 –

我想这个问题是，您对所有视图使用相同的el。

当你创建一个新的产品，做这样的事情：

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

一旦每个产品都有自己的范围，则如预期的事件会工作。

来源

2011-06-22 21:29:18 jzilla

从我的实践中，处理与多个模型视图的最佳方式是有两种观点：

父视图（含集合作为模型） - 把它想成<ul>
子视图（从集合模型） - 把它看成<li>

你父视图渲染所有的子视图和观察COLLEC改变。

每个子视图将其范围限制为li元素，因此模型（其视图）上的每个事件都是分开处理的。

它更容易维护，更清洁，并更好地概述模型视图关系。

来源

2011-06-20 09:29:57 pawlik

用类“.redirect_product”替换id为“#redirect_product”然后，您可以在页面上使用它们中的很多。

大多数时间在骨干视图中，我只使用类。很少有id。鉴于骨干有取景器

this.$(".redirect_product")

，只有在搜索视图的范围，你不必太在意，如果类也存在着观点的范围之外的另一个元素。

来源

2011-06-21 21:28:24 bradgonesurfing

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

回答

相关问题