Marionette.js। एक संग्रह में मॉडल को खींचें और छोड़ें

सूची में तत्वों को स्वैप करने के लिए एक काफी सामान्य कार्य है। लेकिन एक नियम के रूप में, यह कार्य भयानक बैसाखी द्वारा हल किया जाता है, खासकर अगर यह ड्रैग एंड ड्रॉप है।

अब मैं आपको Marionette.js और jQuery UI Sortable का उपयोग करके ऐसा करने का एक बहुत ही सरल और लचीला तरीका बताऊंगा।

कनेक्ट jQuery यूआई

JQuery UI से हमें केवल Sortable का हिस्सा चाहिए, इसलिए, इसके लिए ट्रैफ़िक को बचाने के लिए, मैंने साहसपूर्वक आपके लिए यहां से सभी अनावश्यक चेकमार्क अनियंत्रित किए। आपको बस डाउनलोड करना है।

ध्यान दो

नीचे दिए गए कोड Marionette के लिए एक लिंक का उपयोग करता है

var Marionette=Backbone.Marionette;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

एक व्यवहार पैटर्न बनाएं

हम इस कार्यक्षमता को व्यवहार के रूप में लागू करते हैं, जिसे मैंने पहले लिखा था ।

यहां व्यवहार कोड है जो संग्रह के भीतर मॉडल को छांटने के लिए जिम्मेदार होगा।

 Behaviors.Sortable=Marionette.Behavior.extend({ onRender:function(){ var collection=this.view.collection //   ,items=this.view.children._views //     ,view ; for(var v in items){ view=items[v] view.$el.attr('data-backbone-cid',view.model.cid); //      cid } this.$el.sortable({ //    axis: this.options.axis||false, grid: this.options.grid||false, containment: this.options.containment||false, cursor: "move", handle:this.options.handle||false, revert: this.options.revert||false, update: function( event, ui ) { var model=collection.get(ui.item.data('backbone-cid')); //    collection.remove(model,{silent:true}); // -     collection.add(model,{at:ui.item.index(),silent:true}); //        } }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह क्या है

यह व्यवहार पैटर्न कलेक्शन व्यू के लिए है। यह ऑनरेंडर इवेंट की प्रतीक्षा करता है, जिसके बाद यह प्रत्येक आइटम दृश्य तत्व को cid का उपयोग करके अपने मॉडल पर बांधता है।

तब हम इस सूची को jQuery का उपयोग करके ड्रैग एंड ड्रॉप का उपयोग करके सॉर्ट करने की अनुमति देते हैं।

छांटने का विकल्प

प्रत्येक दृश्य के लिए, आप विकल्पों का अपना सेट पास कर सकते हैं, अधिक विवरण के लिए, jQuery UI प्रलेखन देखें । उपरोक्त कोड में, सभी संभावित विकल्पों को लागू नहीं किया गया है, आप अपनी मर्जी से जोड़ सकते हैं।

छंटाई

जब तत्वों में से एक को घसीटा जाता है, तो हम संग्रह से cid द्वारा इस तत्व से जुड़े मॉडल को हटाते हैं और इसे वांछित सूचकांक में फिर से जोड़ते हैं। मौन: सच्चे झंडे की जरूरत होती है ताकि मैरियोनट.जेएस अपने तरीके से हर चीज को फिर से व्यवस्थित करने की कोशिश न करे, इसके लिए यह अच्छी तरह से काम नहीं करता है।

संग्रह दृश्य और व्यवहार कनेक्ट करें

अब इसे कार्रवाई में लागू करें

 var IView=Marionette.ItemView.extend({//   ItemView template:'#item-template' }) var CView=Marionette.CollectionView.extend({//  CollectionView itemView:IView, behaviors: {//     . Sortable:{//   Sortable   . //      containment containment:'parent' //         . } } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब आप संग्रह दृश्य में ड्रैग एंड ड्रॉप विकल्प को जोड़ने के लिए सिंगल लाइन व्यवहार: {सॉर्टेबल: {}} का उपयोग कर सकते हैं।

सर्वर से इसे कैसे बचाएं?

मुझे नहीं पता कि सर्वर पर किस प्रकार का ऑर्डर संग्रहीत है, लेकिन ऊपर वर्णित दृष्टिकोण का उपयोग करके, आप ऑर्डर को किसी भी प्रारूप में स्थानांतरित कर सकते हैं।

मैं MongoDB का उपयोग करता हूं, इसलिए संग्रह.toJSON () का उपयोग किए बिना किसी भी समस्या के बिना मैं इसे नोड.जेएस सर्वर पर भेजता हूं और इसे सहेजता हूं।

आप सर्वर को ऑर्डर की गई आईडी भेज सकते हैं, जिसका उपयोग करके प्राप्त किया जा सकता है

 collection.pluck('id');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

वह सब

यह काम करता है का आनंद लें!

मुझे उम्मीद है कि लेख ने आपकी मदद की।

कृपया टिप्पणियों में लिखें कि आप और अधिक क्या पढ़ना चाहते हैं।