Marionette.js व्यवहार का परिचय

इस पोस्ट में आप नए Marionette.js फीचर के बारे में जानेंगे - व्यवहार ।



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

लेकिन इसे पहले से ही कोड दोहराव कहा जाता है, और अधिकांश समाजों में इसका स्वागत नहीं किया जाता है। इसलिए, Marionette.js के डेवलपर्स ने हमें व्यवहार के रूप में इस तरह की एक अद्भुत सुविधा प्रदान की।



व्यवहार DOM उपयोगकर्ता इंटरैक्शन विवरणों को कोड के अलग-अलग तार्किक टुकड़ों में अलग करने के लिए एक इंटरफ़ेस प्रदान करता है। व्यवहार को किसी भी समय किसी भी दृश्य पर लागू किया जा सकता है।



इस लेख में हम सबसे तुच्छ उदाहरण पर विचार करेंगे - हटाएं बटन।

व्यवहार का वर्णन कैसे किया जाता है और उन्हें कहाँ संग्रहीत किया जाता है?

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

var Behaviors={}; Backbone.Marionette.Behaviors.behaviorsLookup = function() { return Behaviors; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आप संग्रहण स्थान बदल सकते हैं।

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

फ़ीचर विवरण

एक नया व्यवहार पैटर्न बनाने के लिए, आपको Backbone.Marionette.Behavior का विस्तार करने की आवश्यकता है।

 Behaviors.CloseButton=Backbone.Marionette.Behavior.extend({...})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस वस्तु का विस्तार कैसे किया जा सकता है? हम किसी मॉडल या संग्रह की घटनाओं को उस दृश्य से जोड़कर सुन सकते हैं जिस पर यह टेम्पलेट लागू है।

  Marionette.Behavior.extend({ modelEvents: { "change:doge": "onDogeChange" }, onDogeChange: function() { // buy more doge... }, collectionEvents: { add: "onCollectionAdd" }, onCollectionAdd: function() { } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आप व्यू से बिहेवियर के विकल्प पास कर सकते हैं। उनमें हम कुछ भी स्थानांतरित कर सकते हैं, उदाहरण के लिए, एक तत्व की श्रेणी, जब आप उस पर क्लिक करते हैं तो आपको कुछ हटाने की आवश्यकता होती है।

आप उस तरह की घटनाओं को भी सुन सकते हैं जिस पर हम इसे लागू करते हैं।

ध्यान दें कि यहां फ़ंक्शन संदर्भ वह दृश्य नहीं होगा जिस पर टेम्पलेट लागू किया गया है, लेकिन स्वयं टेम्पलेट। दृश्य तक पहुंचने के लिए, आप इसका उपयोग कर सकते हैं। यह। $ और यह। $ El भी उपलब्ध हैं।

 Backbone.Marionette.Behavior.extend({ onRender:function(){ //    "render". this.view;//    this.$; //  this.view.$ this.$el; //  this.view.$el this.options; //   ,   . } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि आपको किसी विकल्प को पूर्वनिर्धारित करने की आवश्यकता है, तो ऐसा करें

 Marionette.Behavior.extend({ defaults: { 'dominion': 'invasion', 'doge': 'amaze' } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह मॉडल में चूक के समान काम करता है।

एक व्यवहार बनाएँ

जैसा कि मैंने कहा, एक उदाहरण के रूप में, मैं डिलीट बटन का उपयोग करूंगा। कृपया ध्यान दें कि नया व्यवहार टेम्प्लेट उस वस्तु का गुण होना चाहिए जिसे हमने कठपुतली के भंडारण के रूप में निर्दिष्ट किया है।

 Behaviors.CloseButton=Backbone.Marionette.Behavior.extend({ defaults:{ 'el':'.remove-this' }, onRender:function(){ this.$el.find(this.options.el).on('click',this.close.bind(this)); }, close: function() { this.view.model.collection.remove(this.view.model); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इसलिए, हमने बिहेवियर बनाया, इसे क्लोजबॉटन कहा। वह क्या कर रहा है? वह रेंडर घटना को सुनता है, और जब ऐसा होता है, तो वह हैंडलर को तत्व पर क्लिक करने के लिए लटका देता है। और किस तत्व को? वह इसे विकल्पों में से लेता है। डिफ़ॉल्ट रूप से, यह वर्ग .remove- के साथ एक तत्व है, अर्थात् , ऐसा बटन पूरी तरह से काम करेगा

 <button class="remove-this"></button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

टेम्प्लेट तैयार होने के बाद, आप इसे व्यू पर लागू कर सकते हैं।

 var ListItem=Backbone.Marionette.ItemView.extend({ behaviors: { CloseButton: { //   options. //     ,  Marionette    el  '.remove-this' } } }) var Product=Backbone.Marionette.ItemView.extend({ behaviors: { CloseButton: { el:'.delete-product' } } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

उत्पाद दृश्य में, हमने एक विकल्प के साथ व्यवहार पारित किया जो क्लिक के लिए तत्व को ओवरराइड करेगा।



इसलिए बिहेवियर के साथ हमने कोड के दोहराव से बचा और दुनिया को एक बेहतर जगह बना दिया।



पुनश्च अगर किसी को दिलचस्पी है, तो मैं ड्रैग एंड ड्रॉप (jQuery सॉर्टेबल का उपयोग करके) कलेक्शन व्यू को सॉर्ट करने के बारे में लिख सकता हूं।