उप वर्ग एक बैकबोन। उप वर्ग देखें और घटनाओं को बनाए रखें

Question

मेरे पास Backbone.View का एक सामान्य उप-वर्ग है जिसमें close ईवेंट श्रोता है।

var GenericView = Backbone.View.extend({ 

    events : { 
     "click .close" : "close" 
    }, 

    close : function() { 
     console.log("closing view"); 
    } 

}); 

मैं इस सामान्य वर्ग को उप-वर्ग बनाना चाहता हूं और कुछ नई घटनाएं जोड़ना चाहता हूं। हालांकि नीचे सुपर क्लास (उपरोक्त) ईवेंट ऑब्जेक्ट को ओवरराइट कर देगा। जैसे

var ImplementedView = new GenericView({ 

    // setting this will stop 'close' in Super Class from triggering 
    events : { 
     "click .submit" : "submit" 
    } 

}); 

मैं एक उप वर्ग कैसे बनाना चाहिए, इस मामले ImplementedView में और घटनाओं को बनाए रखने?

मुझे कक्षा वर्ग के निर्माण के दौरान ईवेंट ऑब्जेक्ट को विस्तारित करके इसे प्राप्त करने का एक तरीका मिला है। हालांकि मुझे this.delegateEvents() को फिर से ट्रिगर करने की आवश्यकता है, जिसे मैं अनुमान लगा रहा हूं वह अच्छा नहीं है। क्या कोई इस पर टिप्पणी कर सकता है?

var ImplementedView = new GenericView({ 

    initialize : function (options) { 

     _.extend(this.events, { 
      "click .submit" : "submit" 
     }); 

     // re-attach events 
     this.delegateEvents(); 
    } 

}); 

Answer 1

@Nupul बिल्कुल सही है: यदि आप अपने GenericView उपवर्गीकरण नहीं कर रहे हैं।

असल में, सबक्लासिंग वास्तव में सही शब्द नहीं है, क्योंकि जावास्क्रिप्ट शास्त्रीय विरासत नहीं करता है।

तो चलो पहली कोशिश करते हैं और समझते हैं कि यहाँ क्या हो रहा है:

var GenericView = Backbone.View.extend(propertiesObj, classPropertiesObj) 

Backbone.View एक निर्माता समारोह है, कि जब new कीवर्ड के साथ कहा जाता है, आप के लिए एक नई वस्तु बनाता है।

के बाद से इस जेएस है, सभी कार्य वास्तव में वस्तुओं, ढंग से काम कर रहे हैं ताकि Backbone.View.extend सिर्फ एक Backbone.View है कि कुछ काम करता है पर लटके हुए समारोह है:

1. यह तो आप गुण एक्सेस कर सकते हैं, प्रोटोटाइप श्रृंखला सेट कॉल 'आधार' में परिभाषित कार्यों वर्ग
2. यह बनाता है और एक नया निर्माता समारोह आप कॉल कर सकते हैं (जो यहाँ GenericView होगा)
3. यह प्रतियां अपने आप में एक समारोह पर लटके हुए जा करने के लिए अपने इनहेरीट वर्ग की वस्तुओं का दृष्टांत रिटर्न कन्स्ट्रक्टर फ़ंक्शन यह लौटाता है ताकि आप आगे वारिस कर सकें।

तो protoype श्रृंखला आप चाहते हैं स्थापित करने के लिए सही तरीका है:

var ImplementedView = GenericView.extend({ 
    // implementation goes here 
}); 

और नहीं:

var ImplementedView = new GenericView({//stuff}); 

क्योंकि यह सिर्फ एक GenericView का एक नया उदाहरण बनाता है।

अब, आप अभी भी एक समस्या है, क्योंकि जब आप की तरह कुछ कार्य करें: वहाँ परिणाम आप चाहते हैं पाने के लिए विभिन्न तरीके हैं इस बिंदु पर

var impl_view = new ImplementedView; 

impl_view.events; // This isn't merged with the events you created 
        // for the GenericView 

, यहाँ से एक की तरह है कि आप किस delegateEvents तरह का उपयोग करता है है किया। इसका उपयोग करना, संयोग से बुरा नहीं है।

var GenericView = Backbone.View.extend({ 

    genericEvents: { 'click .close': 'close' }, 

    close: function() { console.log('closing view...'); } 

}); 

var ImplView = GenericView.extend({ 

    events: { 'click .submit': 'submit' }, 

    initialize: function(options) { 
    // done like this so that genericEvents don't overwrite any events 
    // we've defined here (in case they share the same key) 
    this.events = _.extend({}, this.genericEvents, this.events); 
    this.delegateEvents() 
    } 
}); 

Answer 2

आप इस उपयोगी लग सकती: मैं http://kalimotxocoding.blogspot.com/2011/03/playing-with-backbonejs-views.html

सेकंड क्या उल्लेख किया है के बारे में _.extend(...) और के लिए आपके वर्तमान ...

Answer 3

एक और विकल्प बेसव्यू होना है जो विस्तार के कार्यान्वयन को ओवरराइड करता है। जैसे:

var BaseView = Backbone.View.extend({ 
     //base view functionality if needed 
    }); 
BaseView.extend = function(child){ 
    var view = Backbone.View.extend.apply(this, arguments); 
    view.prototype.events = _.extend({}, this.prototype.events, child.events); 
    return view; 
}; 

यह बेसव्यू से प्राप्त होने वाली किसी भी चीज़ के लिए स्वचालित रूप से आपके सभी ईवेंट का विस्तार करेगा।

Answer 4

मैं श्री शेवर का समाधान चाहते हैं, लेकिन कुछ कम दखल के लिए:

var ChildView = ParentView.extend({ 
    events : _.extend({ 
     "change input": "handleInputChange" 
    }, ParentView.prototype.events) 
}); 

संपादित: हाँ, आप प्रत्येक बच्चे कक्षा में यह करने के लिए है, लेकिन यह उपयोगी है जब केवल कुछ ही बच्चों की जरूरत है , या जब आप अभिभावक "कक्षा" को नियंत्रित नहीं करते हैं।

Answer 5

यहां एक समाधान है जो मेरे लिए अच्छा काम करता है। आप प्रत्येक सबक्लास में विस्तार किए बिना ईवेंट ऑब्जेक्ट दोनों माता-पिता और उप-वर्ग में उपयोग कर सकते हैं। बस इसे कक्षा कक्षा में एक बार बढ़ाएं:

APP.Views.GenericWizard = Backbone.View.extend({ 
    events: { 
    'click .btn-prev' : function(){} 
    }, 
    initialize: function() { 
    _(this.events).extend(APP.Views.GenericWizard.prototype.events); 
    } 
}); 

APP.Views.RegisterWizard = APP.Views.GenericWizard.extend({ 
    events: { 
    'blur #username' : function(){} 
    }, 
}); 

var registerWizard = new APP.Views.RegisterWizard(); 
console.log(registerWizard.events); 
// Object {blur #username: function, click .btn-prev: function}