मेरे विचारों में Backbone.js घटनाएं कई बार ट्रिगर कर रही हैं

Question

मुझे बैकबोन.जेएस को कार्यान्वित करने के बारे में गलतफहमी हो सकती है, क्योंकि मेरे सभी विचार जो कई मॉडलों का समर्थन करते हैं (उदाहरण के लिए, एक "उत्पाद" दृश्य जो एकाधिक प्रदर्शित कर सकता है उत्पाद), उस सत्र में बनाए गए हर दृश्य में ईवेंट भेजेगा।

तो नीचे दिए गए उदाहरण में, जब मैं #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')}); 

एक बार प्रत्येक उत्पाद का अपना गुंजाइश है, तो घटनाओं की उम्मीद के रूप में काम करेंगे।

Answer 2

मेरी अभ्यास से, सबसे अच्छा तरीका है एक से अधिक मॉडल के साथ विचारों को संभालने के लिए विचारों के दो प्रकार है:

• माता पिता (एक मॉडल के रूप संग्रह के साथ) दृश्य - <ul>
के रूप में यह के बारे में सोच
• बच्चे दृश्य (संग्रह से मॉडल के साथ) - अपने माता पिता को देखने के सभी बच्चे विचारों renders और के संग्रह का मानना ​​है के रूप में <li>

यह के बारे में सोच टयन बदलता है।

प्रत्येक बच्चे के विचार li तत्व पर अपने दायरे को सीमित करते हैं, इसलिए मॉडल (इसके दृश्य) पर प्रत्येक ईवेंट को अलग से संभाला जाता है।

मॉडल-व्यू रिलेशनशिप पर एक बेहतर अवलोकन को बनाए रखना, क्लीनर करना और आसान बनाना है।

Answer 3

एक कक्षा ".redirect_product" के साथ आईडी "#redirect_product" को बदलें, फिर आप उनमें से कई को पृष्ठ पर रख सकते हैं।

रीढ़ की हड्डी के दृश्यों में अधिकांश समय मैं केवल कक्षाओं का उपयोग करता हूं। बहुत ही कम आईडी है। यह देखते हुए रीढ़ की हड्डी एक खोजक

this.$(".redirect_product") 

है कि केवल खोज को देखने के दायरे में आप बहुत ज्यादा देखभाल करने के लिए करता है, तो वर्ग भी दृश्य के दायरे से बाहर एक और तत्व पर मौजूदा है की जरूरत नहीं है है।