बैकबोन व्यू विरासत

Question

मैं किसी ऑब्जेक्ट ब्राउज़र के लिए बैकबोन व्यू लिखने की कोशिश कर रहा हूं जिसे विभिन्न ऑब्जेक्ट प्रकारों और थोड़ा अलग ऑपरेशन के साथ कई स्थानों पर कार्यान्वित करने के लिए डिज़ाइन किया गया है। मैं कुछ अच्छे कोड पुन: उपयोग कैसे प्राप्त कर सकता हूं।

मैंने अपने ब्राउज़र में रीढ़ की हड्डी के दृश्य को विस्तारित करने और फिर मेरे कार्यान्वयन में ब्राउज़र को विस्तारित करने का प्रयास किया है, हालांकि यह मुझे कुछ गुणों के साथ छोड़ देता है। यह एक अवांछित प्रभाव है क्योंकि डेटा प्रत्येक ब्राउज़र निर्माण के साथ सभी कार्यान्वयन में जोड़ा जाता है।

क्या कोई इस समस्या को हल करने या शायद एक वैकल्पिक समाधान को हल करने के तरीके पर प्रकाश डाल सकता है?

यहाँ आप यह कैसे वर्तमान में खड़ा है का एक बेहतर विचार देने के लिए कुछ कोड उदाहरण हैं:

var BrowserView = Backbone.View; 

    _.extend(BrowserView.prototype, Backbone.View.prototype, { 
     className: 'browser', 

     collections: [], 

     events: { 

     }, 

     _events:{ 

     }, 

      initialize: function() { 
      this._initialize(); 
     }, 

     render: function() { 
      this._render(); 
     }, 

     _initialize: function() { 
      this.container = $(this.make('div', {class: 'container'})); 

      this.$el.append(this.container); 

      if (this.options.collections) { 
       this.collections = []; 

       _.each(this.options.collections, this.add, this); 
      } 

      _.extend(this.events, this._events); 

      this.delegateEvents(); 
     }, 

     _render: function() { 
      this.container.empty(); 

      _.each(this.collections, function (view) { 
       this.container.append(view.el); 

       view.render(); 
      }, this); 
     } 
    }); 

    BrowserView.extend = Backbone.View.extend; 

    var ContactBrowserView = BrowserView.extend({ 

    }); 

हमेशा की तरह मैं और अधिक कोड का टुकड़ा मैं प्रदान की है के किसी भी पहलू के संबंध में स्वागत प्रतिक्रिया से।

धन्यवाद, एलेक्स

संपादित मेरे मुद्दा है कि उप वर्गों संग्रह संपत्ति साझा कर रहे हैं। यहां मेरे अपने समाधान का एक उदाहरण दिया गया है जो संग्रहित संपत्ति को विरासत विधि के माध्यम से प्रारंभ करता है। jsfiddle.net/JhZXh/3

Answer 1

यह सार एक बेहतर विकल्प से पता चलता के लिए जाएँ: https://gist.github.com/2287018

Answer 2

यह देखना मुश्किल है कि आपका लक्ष्य वास्तव में क्या है।

लेकिन यह मैं कैसे यह यदि आप एक दृश्य वस्तु

var myView = Backbone.View.extend({ 
    foo: "bar" 
}); 

है और आप इसे backbone.View का विस्तार है ... तो आप वास्तव में रीढ़ की हड्डी के लिए सब कुछ के साथ एक नया दृश्य वस्तु है। देखें, और अतिरिक्त विकल्प जो आप पैरामीटर के रूप में देते हैं।

यदि आप तो जाने के लिए और एक दूसरे दृश्य बनाते हैं, कि फैली अपने पहले एक यह आपकी पहली दृष्टि से सब कुछ मिल जाएगा, + यह खुद एक्स्ट्रा कलाकार

var mySecondView = myView.extend({ 
    foobar: "f00b@r" 
}); 

यदि आप दूसरे दृश्य का एक उदाहरण बन जाएगा और यह foo संपत्ति है यह अभी भी मूल्य

var mySecondViewInstance = new mySecondView(); 
console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo); 
console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar); 

रूप "bar" पकड़ अगर मैं मेरा पहला दृश्य का एक नया उदाहरण पैदा करेगा, और "changed-foo"में foo बदल लॉग इन करेंfoomySecondViewInstance पर लॉग अभी भी हो जाएगा "bar"

var myViewInstance = new myView(); 
myViewInstance.foo = "changed-foo"; 
console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo); 
console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar); 

एक जे एस-फिडल साथ यह यहां पाया जा सकता चारों ओर खेलने के लिए: Backbone.View से http://jsfiddle.net/saelfaer/uNBSW/

Answer 3

इनहेरिट काम नहीं करता है, या काफी जटिल है ।

var ViewInterface = { 
    events  : { /* ... */ }, 
    initialize : function (options) { /* ... */ }, 
    otherFunction : function (options) { /* ... */ }, 
} 

आपके विचार से प्रत्येक इस वस्तु से विस्तार होगा::

var BrowserView = Backbone.View.extend(_.extend(ViewInterface, { 
    anotherFunction : function (options) { /* ... */ }, 
}) 

var AnotherView = Backbone.View.extend(_.extend(ViewInterface, { 
    yetAnotherFunction : function (options) { /* ... */ }, 
}) 

Answer 4

मुझे लगता है कि मैं

आप एक आम वस्तु है, जो आपके विचार के हर से प्राप्त कर लेंगे, यानी बनाना चाहिए मैंने अपनी समस्या का उत्तर निकाला है।

मुझे विश्वास है कि मैं जो खोज रहा हूं उसे प्राप्त करने का सही तरीका है बैकबोन दृश्यों द्वारा प्रदान की गई प्रारंभिक विधि में गुणों की शुरुआत को स्थानांतरित करना। इस तरह से वे

var BrowserView = Backbone.View.extend({ 
    initialize: function() { 
     this.collections = []; 
    } 
}); 

var FileBrowserView = BrowserView.extend({ 
    initialize: function() { 
     BrowserView.prototype.initialize.apply(this); 

     this.collections.push({name: 'Example Collection' + Math.rand()}); 
    } 
}); 


var FileBrowserInstance1 = new FileBrowserView; 
console.log(FileBrowserInstance1.collections); 

var FileBrowserInstance2 = new FileBrowserView; 
console.log(FileBrowserInstance2.collections); 

प्रारंभ कर रहे हैं यहाँ एक बेला http://jsfiddle.net/yssAT/2/