Sự kiện Backbone.js trong quan điểm của tôi đang kích hoạt nhiều lần

Question

Tôi có thể hiểu sai về cách triển khai backbone.js, vì tất cả các chế độ xem của tôi hỗ trợ nhiều mô hình (ví dụ: chế độ xem "Sản phẩm" có thể hiển thị nhiều sản phẩm), sẽ gửi các sự kiện tới mọi chế độ xem đã được tạo trong phiên đó.

Vì vậy, trong ví dụ bên dưới, khi tôi nhấp vào liên kết #redirect_product, "redirect_product" được gọi nhiều lần tùy thuộc vào số lượng sản phẩm tôi đã xem. Nếu tôi đã xem 5 sản phẩm, vào lần nhấp thứ 6, tôi sẽ nhận được 6 thông báo.

Điều gì đang xảy ra ở đây?

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

Vấn đề, tôi nghĩ, là bạn sử dụng cùng một el cho tất cả các chế độ xem của bạn.

Khi bạn tạo ra một sản phẩm mới, làm một cái gì đó như thế này:

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

Khi mỗi sản phẩm có phạm vi riêng của mình, sau đó các sự kiện sẽ làm việc như mong đợi.

Answer 2

Từ thực tế của tôi, cách tốt nhất để xử lý ý kiến ​​với nhiều mô hình là phải có hai loại quan điểm:

• xem cha mẹ (với Bộ sưu tập như một mô hình) - nghĩ về nó như <ul>
• views con (với mô hình từ bộ sưu tập) - nghĩ về nó như <li>

xem cha mẹ của bạn làm cho tất cả các quan điểm con và quan sát collec thay đổi tion.

Mỗi chế độ xem con giới hạn phạm vi của nó với thành phần li, do đó, mỗi sự kiện trên mô hình (chế độ xem của nó) được xử lý riêng.

Dễ dàng hơn để duy trì, sạch hơn và cung cấp cái nhìn tổng quan tốt hơn về mối quan hệ mô hình.

Answer 3

Thay thế id "#redirect_product" bằng một lớp ".redirect_product" Sau đó, bạn có thể có nhiều người trong số họ trên trang.

Hầu hết thời gian ở chế độ xem xương sống, tôi chỉ sử dụng các lớp học. Rất hiếm khi của id. Cho rằng xương sống có một công cụ tìm

this.$(".redirect_product") 

mà chỉ tìm kiếm trong phạm vi của quan điểm bạn không cần phải quan tâm quá nhiều nếu lớp là cũng đang tồn tại trên một yếu tố nằm ngoài phạm vi xem.