ट्रिक्स और टर्बो फ्रेम्स का उपयोग करके रेल्स में एक डायनामिक टेबल एडिटर बनाएं
<पी> इस पोस्ट में, हम आपके रेल एप्लिकेशन के लिए एक बुनियादी एक्शनटेक्स्ट टेबल एडिटर लागू करेंगे। हम सीखेंगे कैसे: - एक्शनटेक्स्ट और ट्रिक्स अटैचमेंट को संभालते हैं
- हमारे अपने
Attachable को लागू करने के लिए टाइप करें, और एक बुनियादी तालिका संपादक बनाने के लिए इसका लाभ उठाएं
- टर्बो फ़्रेम का उपयोग तालिका को संपादित करने के लिए किया जा सकता है
- टर्बो मदद करता है और एक ही समय में रास्ते में आता है
<पी> यह लेख 2020 के उत्कृष्ट 'एडिंग टेबल्स टू एक्शनटेक्स्ट विद स्टिमुलस.जेएस' ब्लॉग पोस्ट से प्रेरणा लेता है। यह हालांकि टर्बो के आगमन से पहले लिखा गया था, जिससे हम मामलों को काफी हद तक सरल बनाने की उम्मीद कर सकते हैं। <पी> चलिए आगे बढ़ते हैं! रेल 101 में एक्शनटेक्स्ट अटैचमेंट
<पी> नोट :यह प्रदर्शन ट्रिक्स और टर्बो फ्रेम्स की कुछ समझ मानता है। आपको हमारी 'रूबी ऑन रेल्स ऐप में हॉटवायर के साथ शुरुआत करें' पोस्ट हॉटवायर और टर्बो फ्रेम्स की मूल बातें सीखने में मददगार लग सकती है। <पी> आप इस GitHub रेपो के साथ कोड प्रदर्शन का अनुसरण कर सकते हैं। <पी> जैसा कि ActionText दस्तावेज़ में वर्णित है: <पी> एक्शन टेक्स्ट रेल्स में समृद्ध टेक्स्ट सामग्री और संपादन लाता है। इसमें ट्रिक्स संपादक शामिल है जो फ़ॉर्मेटिंग से लेकर लिंक, उद्धरण, सूचियों से लेकर एम्बेडेड छवियों और गैलरी तक सब कुछ संभालता है। <पी> उच्च स्तर पर, अनुलग्नक एक्शनटेक्स्ट के दस्तावेज़ मॉडल का हिस्सा हैं। वे हस्ताक्षरित ग्लोबल आईडी (एसजीआईडी) द्वारा समाधान योग्य किसी भी संसाधन के लिए कस्टम टेम्पलेट प्रस्तुत करते हैं। दूसरे शब्दों में, ActionText एक निश्चित SGID के संदर्भ को <action-text-attachment> के रूप में संग्रहीत करता है तत्व: <पी> जब भी ActionText को ऐसे किसी तत्व का सामना करना पड़ता है, तो वह to_attachable_partial_path को कॉल करता है संबंधित संसाधन पर विधि. डिफ़ॉल्ट रूप से, यह विधि to_partial_path को निर्दिष्ट करती है . <पी> तो, एक पूर्वावलोकन के रूप में, हमारा Table इस प्रकार है HTML में वापस प्रस्तुत किए जाने पर ActionText में इसका प्रतिनिधित्व दिखने लगेगा: <पी> एक्शनटेक्स्ट अटैचमेंट एपीआई के अनुरूप होने के लिए, एक क्लास को केवल दो चीजें करनी होती हैं: to_sgid लागू करें GlobalID::Identification को शामिल करके . डिफ़ॉल्ट रूप से, सभी ActiveRecord::Base वंशज पहले से ही ऐसा करते हैं।ActionText::Attachable शामिल करें मॉड्यूल.
<पी> ActionText::Attachable मॉड्यूल attachable_sgid के माध्यम से किसी भी मॉडल को एसजीआईडी में बदलने के लिए विहित तरीके प्रदान करता है। और from_attachable_sgid तरीके. हम इसका उपयोग बाद में करेंगे। <पी> यह अटैचमेंट मेटाडेटा, जैसे फ़ाइल आकार और नाम, साथ ही सामग्री प्रकार के लिए सुविधा एक्सेसर्स भी प्रदान करता है। <पी> अंत में, यह संपादक और रिच टेक्स्ट दृश्यों में अनुलग्नक प्रस्तुत करने के लिए उपयोग किए जाने वाले आंशिक भागों के लिए डिफ़ॉल्ट स्थान प्रदान करता है। एक टेबल मॉडल जोड़ना
<पी> हम अपने टेबल समाधान को लागू करने के लिए एक्शनटेक्स्ट के अटैचमेंट एपीआई का उपयोग करेंगे। इसके लिए, हमें अपनी तालिकाओं के डेटा को कैप्चर करते हुए एक कस्टम मॉडल बनाना होगा और Attachable को शामिल करना होगा . हम तालिका डेटा के लिए द्वि-आयामी सरणी रखने के लिए एक सरल JSON(B) कॉलम का उपयोग करेंगे। <पी> अपना अन्वेषण शुरू करने के लिए, आइए ActionText सक्षम के साथ एक नया रेल ऐप बनाएं: <पी> चूँकि मैं आज रचनात्मक महसूस नहीं कर रहा हूँ, आइए एक Article बनाएं शीर्षक और समृद्ध पाठ्य सामग्री वाला मॉडल: <पी> सावधान रहें, यहाँ एक आश्चर्यजनक गच्चा है! उपरोक्त इंस्टॉल कमांड ने एक CreateActionTextTables बनाया माइग्रेशन, इसलिए हमें इसका नाम बदलकर CreateActionTextTablesTable करना होगा . इसके अतिरिक्त, हम null: false, default: [["", ""], ["", ""]] का उपयोग करके इसे 2x2 तालिका में डिफ़ॉल्ट रखेंगे . रेल एक्शनटेक्स्ट मॉडल में एक तालिका जोड़ें
<पी> इससे पहले कि हम वास्तव में रिच टेक्स्ट में एक तालिका जोड़ना जारी रखें, हमें ट्रिक्स के टूलबार को पैच करना होगा: <पी> यहां, हम मैन्युअल रूप से ट्रिक्स के toolbarElement में एक बटन जोड़ते हैं . इसे trix-table तक वायरिंग करें स्टिमुलस नियंत्रक (जिसे हमें अभी बनाना है) दस्तावेज़ में एक तालिका सम्मिलित करेगा। आइए इस बटन को CSS में सामग्री के रूप में एक अच्छा SVG दें और इस पर काम करते समय कुछ तालिका शैलियाँ सेट करें: <पी> जैसा कि आप देख सकते हैं, हमने इसे सफलतापूर्वक "फ़ाइल-टूल्स" समूह में जोड़ दिया है: <पी> 
<पी> अब टर्बो की मदद से तालिकाओं को जोड़ने और हेरफेर करने पर वापस आते हैं। इसके लिए हमें सबसे पहले create वाले कंट्रोलर की आवश्यकता होगी क्रिया: <पी> यह कार्रवाई कमोबेश 'ऑन रेल्स' ब्लॉग पोस्ट से उधार ली जा सकती है जिसका हमने परिचय में उल्लेख किया है। यह क्लाइंट साइड पर अटैचमेंट डालने के लिए आवश्यक JSON का निर्माण करता है:जिसमें SGID और content शामिल है editor से प्रस्तुत किया गया आंशिक, जैसा कि हम बाद में देखेंगे। <पी> हम प्रासंगिक संसाधनपूर्ण तालिका मार्ग जोड़ते हैं हमारे कॉन्फ़िगरेशन के लिए: <पी> अब गहरे अंत में उतरने का समय आ गया है:हमें अपना टेबल मॉडल बनाने की जरूरत है। सबसे पहले, आइए ActionText::Attachable को शामिल करें और प्रासंगिक आंशिक पथ परिभाषित करें: <पी> ध्यान दें कि हमने अभी तक यह परिभाषित नहीं किया है कि तालिका की सामग्री कैसे संग्रहीत की जाती है। चूँकि हमने इसे अपने डेटाबेस में JSON(B) कॉलम के रूप में घोषित किया है, हम कोई भी प्रारूप चुनने के लिए स्वतंत्र हैं। उद्धृत ब्लॉग पोस्ट से थोड़ा हटकर, आइए द्वि-आयामी सरणी पर चलते हैं। इस प्रकार, हम बस content पर एक नेस्टेड लूप कर सकते हैं इस तरह: <पी> जब भी ActionView द्वारा अनुरोध किया जाएगा तो उपरोक्त आंशिक प्रस्तुत किया जाएगा , उदाहरण के लिए। इसके बाद, हमें एक editor भी तैयार करना होगा ट्रिक्स में आंशिक रूप से इनलाइन उपयोग किया जाना है: <पी> एकमात्र अंतर, जैसा कि आपने शायद देखा होगा, यह है कि अब हमने SGID को DOM आईडी के रूप में उपयोग करते हुए इसे टर्बो फ्रेम में लपेट दिया है। इसके अलावा, हम विभाजक ब्लॉकों को पंक्ति और स्तंभ अनुक्रमणिका प्रदान करते हैं और आंतरिक DIV contenteditable बनाकर इनलाइन संपादन के लिए तैयार करते हैं। - हम उस पर बाद में विचार करेंगे। <पी> अब हम अपने टूलबार के टेबल बटन को सर्वर-साइड कंट्रोलर एक्शन से कनेक्ट करेंगे जो हमने अभी लिखा है। ऐसा करने के लिए, हमें सबसे पहले रेल्स की request.js लाइब्रेरी को प्रोजेक्ट में लाना होगा। यह लाइब्रेरी हमें post को प्रशासित करने में मदद करेगी ग्राहक से अनुरोध, जिसमें उचित सीएसआरएफ-टोकन आदि शामिल हैं: एक नया ट्रिक्स टेबल स्टिमुलस कंट्रोलर बनाएं
<पी> अब जब सब कुछ सेट हो गया है, तो आइए एक नई ट्रिक्स-टेबल बनाएं उत्तेजना नियंत्रक. इसमें हम attachTable लागू करेंगे हमारे टूलबार बटन द्वारा संदर्भित कार्रवाई: <पी> यह तालिका के create पर पोस्ट करेगा रूट, JSON प्रतिक्रिया को ट्रिक्स अनुलग्नक के रूप में सम्मिलित करना . यह फिर से ऑनरेल्स ब्लॉग पोस्ट से उधार लिया गया है, अप्रचलित rails-ujs का आदान-प्रदान करते हुए नए request.js के लिए कॉल करता है पुस्तकालय. <पी> अब हमें वास्तव में इस नियंत्रक को फॉर्म के मार्कअप में जोड़कर अपने ऐप में इसका उपयोग करना होगा: <पी> Stimulus.js की खूबी यह है कि form में केवल दो डेटा विशेषताएँ जोड़ी जाती हैं तत्व वांछित परिणाम प्राप्त करता है। अब हम एक बटन क्लिक से अपने लेख की सामग्री में तालिकाएँ जोड़ने में सक्षम हैं: <पी> 
टर्बो फ्रेम्स के माध्यम से तालिका में हेरफेर
<पी> अब जब हम टेबल अटैचमेंट बना सकते हैं, तो आइए अपना ध्यान सामग्री में हेरफेर करने पर केंद्रित करें। जैसा कि यह पता चला है, टर्बो फ्रेम्स लगभग हैं यहाँ एक प्राकृतिक फिट है। तालिका पंक्तियाँ और कॉलम जोड़ें और हटाएँ
<पी> तालिका पंक्तियों और स्तंभों को जोड़ने और हटाने के लिए, हम एक मिनी-टूलबार बनाते हैं जिसमें चार बटन होते हैं, प्रत्येक ऑपरेशन के लिए एक। button_to का उपयोग करें सहायक और यूआरएल को update पर सेट करें संबंधित तालिका के लिए मार्ग. आइए उस संबंधित ऑपरेशन को जोड़ें जिसे हम अतिरिक्त पैरामीटर के रूप में ट्रिगर करना चाहते हैं: <पी> बदले में, हमें अपने TablesController में संबंधित नियंत्रक क्रिया(क्रियाओं) को भी जोड़ना होगा . ध्यान दें कि update कार्रवाई उन क्रियाओं को मॉडल को सौंपती है। <पी> तालिका की संरचना में परिवर्तन सहेजे जाने के बाद, हम तालिका के संपादन दृश्य पर पुनर्निर्देशित करते हैं। यह वही editor प्रस्तुत करता है आंशिक, जिसका समान टर्बो फ्रेम को संदर्भित करने का दुष्परिणाम है। इस प्रकार टर्बो मेल खाते फ़्रेम का पता लगा सकता है और एक को दूसरे से प्रतिस्थापित कर सकता है। <पी> अब हमें Table पर छूटे हुए कमांड को लागू करना होगा मॉडल. <पी> विशेष रूप से, द्वि-आयामी सरणी की हमारी सरल डेटा संरचना के कारण, add/remove<sub>column</sub>/row विधियाँ स्तंभ और पंक्ति गणना को संशोधित करने के लिए मात्र प्रॉक्सी हैं। एक बार यह स्थापित हो जाए, तो हम बटन क्लिक से अपनी तालिका की संरचना बदल सकते हैं: <पी> 
तालिका कक्षों की सामग्री संपादित करें
<पी> स्तंभों और पंक्तियों की संख्या बदलने के अलावा, हम कक्षों की सामग्री को संपादित भी करना चाहते हैं। इसे प्राप्त करने के लिए, हम फिर से उद्धृत ब्लॉग पोस्ट पर भारी निर्भर रहेंगे और एक स्टिमुलस टेबल संपादक नियंत्रक बनाएंगे। <पी> updateCell जब भी किसी सेल को संपादित किया जाता है तो विधि एक PATCH अनुरोध जारी करेगी, पंक्ति और स्तंभ अनुक्रमणिका को पैरामीटर के रूप में पास करेगी। अब, हमें बस इसे अपने DOM से जोड़ना है: <पी> सर्वर-साइड TablesController निस्संदेह, अब इस ऑपरेशन को संभालने के लिए एक तरीके की आवश्यकता है। सौभाग्य से, यह हमारी स्थिति में एक और शाखा जोड़कर अवधारणा के सरलीकृत प्रमाण में आसानी से किया जाता है। हम यह भी सुनिश्चित करते हैं कि update कार्रवाई अब JSON-प्रकार के अनुरोधों को संभाल सकती है, भले ही वह यहां केवल एक खाली ऑब्जेक्ट लौटा रही हो। <पी> ध्यान दें कि एक प्रोडक्शन ऐप में, मैं आपको ऑपरेशन को सैनिटाइज़ करने के लिए if/elsif/else की तुलना में एक अलग रणनीति चुनने की सलाह दूंगा। शर्त. मैं शायद इस मामले में मध्यस्थ या प्रॉक्सी तक पहुंचूंगा। रूबी में ट्रिक्स की सीमाएं
<पी> इस बिंदु तक, मेरा मानना है कि इस विवरण का सही अर्थ है, लेकिन मैंने एक महत्वपूर्ण विवरण छोड़ दिया है। हालाँकि हम अंतर्निहित डेटाबेस मॉडल को ठीक से बनाए रख रहे हैं, हम इसे ट्रिक्स के आंतरिक छाया प्रतिनिधित्व के साथ समन्वयित नहीं कर रहे हैं। यही कारण है कि जब हम इससे ध्यान हटाते हैं तो तालिका पहले से संग्रहीत प्रतिनिधित्व पर वापस आ जाती है: <पी> 
<पी> यदि हम अभी पृष्ठ को ताज़ा करें, तो जोड़ी गई सामग्री दिखाई देगी, क्योंकि ट्रिक्स का दस्तावेज़ नए सिरे से प्रारंभ किया गया है। <पी> मैंने इस समस्या को उस स्थान पर पिन कर दिया है जहां चयन बदलने पर ट्रिक्स अपने आंतरिक दस्तावेज़ को सिंक करता है। यह बस इसे यहां छाया तत्व से प्रकट करता है। <पी> मैंने turbo:submit से जुड़ने का प्रयास किया घटना और किसी तालिका को धुंधला करते समय सिंक को रोकना, लेकिन मैं जो समाधान लेकर आया हूं वे सभी बहुत ही जटिल और आंतरिक एपीआई पर अत्यधिक निर्भर लगते हैं। <पी> मुझे लगता है कि इससे निपटने का सबसे टर्बो-एस्क तरीका यह होगा कि पूरे फॉर्म को उत्सुकता से भरे हुए टर्बो फ्रेम में लपेट दिया जाए और जब भी ट्रिक्स की सामग्री बदले तो इसे फिर से लोड करने के लिए कहा जाए। <पी> कुछ इस तरह की चाल चलनी चाहिए: <पी> यदि आप अपना फॉर्म टर्बो फ्रेम में संलग्न करते हैं जिसे आप src से लोड करते हैं : <पी> हालाँकि, यह दृष्टिकोण केवल पहले से मौजूद आधार रिकॉर्ड के साथ ही काम करता है। ट्रिक्स पर चेतावनी के अंतिम शब्द
<पी> हमने जो अवधारणा का प्रमाण बनाया है, वह JSON में तालिकाओं को क्रमबद्ध करने और जावास्क्रिप्ट घटनाओं को सुनने की अतिरिक्त जटिलता को दूर करने के लिए सर्वर-रेंडर HTML का उपयोग करता है। यह किसी भी ActionText इंस्टॉलेशन के लिए पोर्टेबल है और इसे आसानी से किसी रत्न में निकाला जा सकता है। <पी> हालाँकि, कुछ कमियाँ हैं, जिनमें से सबसे स्पष्ट है ट्रिक्स के दस्तावेज़ मॉडल के साथ आवश्यक पुन:समन्वयन। ऐसी स्थितियाँ हो सकती हैं जहाँ प्रस्तावित समाधान व्यावहारिक हो और अन्य ऐसी स्थितियाँ हों जहाँ यह संभव न हो। जब तक ट्रिक्स को टर्बो-संगत इंटरफ़ेस नहीं मिल जाता, तब तक कोई रास्ता नहीं है। <पी> दूसरी समस्या यह है कि यह ट्रिक्स के undo का उपयोग नहीं करता है कार्यक्षमता (लेकिन यह किसी भी ट्रिक्स अनुलग्नक के लिए सच है)। इसी तरह, आंतरिक एपीआई में बदलाव करने के बजाय अपस्ट्रीम परिवर्तनों की प्रतीक्षा करना बुद्धिमानी होगी। समाप्ति
<पी> इस पोस्ट में, हमने एक्शनटेक्स्ट अटैचमेंट की बुनियादी बातों पर एक त्वरित नज़र डालकर शुरुआत की। फिर हमने टर्बो फ्रेम्स का उपयोग करके इसमें बदलाव करने से पहले एक्शनटेक्स्ट मॉडल में एक तालिका जोड़ी। अंत में, हमने ट्रिक्स के उपयोग की कुछ सीमाओं पर बात की। <पी> यह देखते हुए कि ट्रिक्स v2 पर काम चल रहा है, जिसमें कॉफ़ीस्क्रिप्ट से सादे आधुनिक जावास्क्रिप्ट में अनुवाद शामिल है, अब इसकी टर्बो संगतता को संबोधित करने का एक अच्छा समय होगा। वर्तमान में, ऐसा रैपर कैसा दिखेगा इसका दायरा मेरी क्षमताओं से परे है, लेकिन यह निश्चित रूप से अवसर की खिड़की जैसा दिखता है। <पी> हैप्पी कोडिंग! <पी> पी.एस. यदि आप प्रेस से हटते ही रूबी मैजिक पोस्ट पढ़ना चाहते हैं, तो हमारे रूबी मैजिक न्यूज़लेटर की सदस्यता लें और एक भी पोस्ट न चूकें!
