2011-06-19 6 views
5

Mogę mieć nieporozumienie dotyczące implementacji pliku backbone.js, ponieważ wszystkie moje widoki obsługują wiele modeli (na przykład widok "Produkt", który może wyświetlać wiele produkty), będzie wysyłać zdarzenia do każdego widoku, który został utworzony w tej sesji.Zdarzenia Backbone.js w moich widokach wyzwalających wiele razy

Tak więc w poniższym przykładzie, po kliknięciu linku #redirect_product, "produkt przekierowania" nazywa się wiele razy w zależności od tego, ile produktów widziałem. Jeśli widziałem 5 produktów, na 6 kliknięciu dostanę 6 alertów.

Co tu się dzieje?

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  }); 
+2

Czy identyfikator #redirect_product pojawia się wiele razy na stronie? Jeśli tak, wydaje się, że każda z tych instancji widoku produktu uzna, że ​​musi obsługiwać zdarzenie. –

+1

Identyfikator redirect_product pojawia się tylko raz w widoku. Jednak każdy widok produktu będzie miał jedno wystąpienie ID produktu redirect_product. Jak mogę powstrzymać inne wyświetlenia od odpowiedzi na zdarzenie kliknięcia? – DevX

+0

Musisz przeczytać ten link: http://documentcloud.github.com/backbone/docs/todos.html. Wierzę, że twój problem leży w twoim leczeniu el. Twoje wydarzenie nie jest ograniczone do szablonu produktu. –

Odpowiedz

8

Problem polega, jak sądzę, na tym, że używasz tego samego el dla wszystkich swoich widoków.

Podczas tworzenia nowego produktu, zrób coś takiego:

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

Raz każdy produkt ma swój własny zakres, a następnie zdarzenia będzie działać zgodnie z oczekiwaniami.

3

Od mojej praktyce, najlepszym sposobem radzenia sobie poglądy z wielu modeli ma mieć dwa rodzaje poglądów:

  • widoku nadrzędnego (z Kolekcji jako model) - myśleć o nim jako <ul>
  • poglądy dziecka (w modelach z kolekcji) - myśleć o nim jako <li>

Państwa zdanie rodzic renderuje wszystkie poglądy dzieci i przestrzega kolektorów zmiany.

Każdy widok podrzędny ogranicza jego zakres do elementu li, więc każde zdarzenie w modelu (jego widok) jest obsługiwane osobno.

Ułatwia konserwację, czystość i daje lepszy przegląd relacji model-widok.

1

Zamień identyfikator "#redirect_product" na klasę ".redirect_product" Następnie możesz mieć ich wiele na stronie.

W większości przypadków w widokach szkieletu używam tylko klas. Bardzo rzadko id. Biorąc pod uwagę, że kręgosłup ma wizjera

this.$(".redirect_product") 

które wyszukuje tylko w zakresie widzenia nie trzeba troszczyć się zbyt wiele, jeśli klasa jest istniejąca również na innym elemencie poza zakresem widoku.

Powiązane problemy