[英]Backbone.js events in my views being triggering multiple times
I may have a misunderstanding on how to implement backbone.js, because all of my views that support multiple models (for example, a "Product" view that that can display multiple products), will send events to every view that was created in that session. 我可能对如何实现backbone.js有误解,因为我支持多个模型的所有视图(例如,可以显示多个产品的“产品”视图)都会将事件发送到在其中创建的每个视图会话。
So in the example below, when I click the #redirect_product link, the "redirect_product" is called multiple times depending on how many products i've seen. 因此,在下面的示例中,当我单击#redirect_product链接时,根据我看到的产品数量多次调用“redirect_product”。 If I've viewed 5 products, on the 6th click I will get 6 alerts.
如果我查看了5个产品,那么在第6次点击我会得到6个警报。
What's going on here? 这里发生了什么?
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 });
The problem, I think, is that your using the same el
for all your views. 我认为,问题在于您使用相同的
el
来查看所有视图。
When you create a new Product, do something like this: 创建新产品时,请执行以下操作:
$('#content_sec').append('<div class="productView"></div>');
var product = new Product();
var view = new ProductView({model: product, el: $('.productView:last')});
Once each product has its own scope, then the events will work as expected. 一旦每个产品都有自己的范围,那么事件将按预期工作。
From my practice, the best way to handle views with multiple models is to have two kinds of views: 从我的实践来看,使用多个模型处理视图的最佳方法是使用两种视图:
<ul>
<ul>
<li>
<li>
Your parent view renders all the child views and observes Collection changes. 您的父视图呈现所有子视图并观察集合更改。
Each of the child views limits its scope to the li
element, so each event on a model (its view) is handled separately. 每个子视图都将其范围限制为
li
元素,因此模型上的每个事件(其视图)都是单独处理的。
It's easier to maintain, cleaner and gives a better overview on the model-view relationship. 它更易于维护,更清晰,并且可以更好地概述模型 - 视图关系。
Replace id "#redirect_product" with a class ".redirect_product" Then you can have many of them on the page. 用类“.redirect_product”替换id“#redirect_product”然后你可以在页面上有很多。
Most of the time in backbone views I only use classes. 在骨干视图中大多数时候我只使用类。 Very rarely id's.
很少是id。 Given that backbone has a finder
鉴于骨干有一个发现者
this.$(".redirect_product")
that only searches in scope of the view you don't need to care too much if the class is also existing on another element outside the scope of the view. 如果该类也存在于视图范围之外的另一个元素上,那么只在视图范围内搜索您不需要太在意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.