रीबोन रीबंडिंग इवेंट्स

Question

मेरे पास दो विचार हैं, एक क्लाइंट के दृश्य का प्रतिनिधित्व करता है और दूसरा व्यक्तिगत ग्राहक विचार है। मैं छवि पर ओवरले में फीका और बाहर करने के लिए क्लाइंट व्यू में mouseenter और mouseleave ईवेंट बाध्यकारी हूं। जब यह स्वयं होता है तो यह ठीक काम करता है। हालांकि, मैं एक कैरोसेल प्रभाव करने के लिए एक jQuery प्लगइन का उपयोग भी कर रहा हूं (प्लगइन here)। एक बार यह सक्षम हो जाने पर, मेरी कस्टम घटनाएं अब काम नहीं करती हैं। क्या प्लगइन शुरू होने के बाद क्लाइंट व्यू इवेंट्स का कोई तरीका है? बैकबोन का उपयोग करने वाला यह मेरा पहला समय है, इसलिए मैं कुछ और गलत कर रहा हूं।

// Client View 
window.ClientView = Backbone.View.extend({ 
    tagName: 'li', 
    template: _.template($("#client-template").html()), 
    className: 'client-thumb', 

    events: { 
    "mouseenter": "fadeOutOverlay", 
    "mouseleave": "fadeInOverlay" 
    }, 

    initialize: function() { 
    }, 

    render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    return this; 
    }, 

    fadeOutOverlay: function() { 
    $(this.el).find(".slider-image-overlay").fadeOut('fast'); 
    }, 

    fadeInOverlay: function() { 
    $(this.el).find(".slider-image-overlay").fadeIn('fast'); 
    } 

}); 

// Clients View 
window.ClientsView = Backbone.View.extend({ 
    el: "#clients", 

    initialize: function() { 
    this.collection.bind('all', this.render, this); 
    }, 

    render: function() { 
    var $clients = $("<ul class='clearfix'></ul>"); 
    _.each(this.collection.models, function(client) { 
     var view = new ClientView({model: client}); 
     $clients.append(view.render().el); 
    }); 

    $(this.el).hide().append($clients).fadeIn().scrollingCarousel(); 

    return this; 
    } 
}); 

संपादित:

यहाँ कोड है यहाँ मैं विचारों बनाए गए (लोगों को उन पर घटनाओं है) पर delegateEvents() कोशिश कर रहा हूँ:

App.View.ClientsView = Backbone.View.extend({ 
    el: "#clients", 

    initialize: function() { 
    this.collection.bind('all', this.render, this); 
    }, 

    render: function() { 
    var $clients = $("<ul class='clearfix'></ul>"); 
    var views = []; 
    _.each(this.collection.models, function(client) { 
     var view = new App.View.ClientView({model: client}); 
     views.push(view); // Store created views in an array... 
     $clients.append(view.render().el); 
    }); 

    $(this.el).hide().append($clients).fadeIn().scrollingCarousel({ 
     // Use the plugin's callback to try to delegate events again 
     afterCreateFunction: function() { 
     _.each(views, function(view){ 
      view.delegateEvents(); 
     }); 
     } 
    }); 

    return this; 
    } 
}); 

कोशिश की लेकिन काम नहीं लग रहा है? क्या मैं यह ठीक कर रहा हूँ? मुझे लगता है कि प्लगइन मैं डोम से ज्यादा सोच रहा हूं। ऐसा लगता है कि यह उन तत्वों को छू रहा है जिन्हें मैं बांधने की कोशिश कर रहा हूं और mouseenter और mouseleave पर बाध्यकारी हूं। मैं इस प्लगइन से अपरिचित हूं, ऐसा नहीं लगता कि इसमें एक असीमित संस्करण है इसलिए मैं इसे बहुत अच्छी तरह से पढ़ नहीं सकता।

कोई अन्य सुझाव?

Answer 1

आप अपने को देखने के delegateEvents पद्धति का उपयोग करके अपने ईवेंट rebind कर सकते हैं

उपयोग: myView.delegateEvents()

संदर्भ अधिक जानकारी के लिए प्रलेखन http://backbonejs.org/#View-delegateEvents

संपादित करें:

इस प्लगइन बांधता है और अनइंड्स माउसेंटर/नेमस्पेसिंग के बिना छोड़ें - प्लगइन स्क्रिप्ट खोलें और ईवेंट बाइंडिंग और अनबाइंडिंग में नेमस्पेस जोड़ें।

इनमें से हर घटना के लिए इन सुधारों को लागू करते हैं और यह delegateEvents()

r.unbind("mouseenter"); =>r.unbind("mouseenter.carousel"); r.unbind("mouseleave"); =>r.unbind("mouseleave.carousel");

r.mouseenter(function() { ... =>r.bind('mouseenter.carousel', function() { ... r.mouseleave(function() { ... =>r.bind('mouseleave.carousel', function() { ...