Stimulus.js और JavaScript एकीकरण के साथ अपने रेल्स 7 ऐप को बेहतर बनाएं

स्टिमुलस.जेएस एक मामूली जावास्क्रिप्ट ढांचा है जो आपके HTML को बढ़ाता है। यह रेल्स की अंतर्निहित कार्यक्षमता के लिए एकदम सही साथी है। इस पोस्ट में, हम यह पता लगाएंगे कि जावास्क्रिप्ट कार्यक्षमता के लिए स्टिमुलस.जेएस का उपयोग कैसे करें, इसे अन्य जावास्क्रिप्ट पुस्तकालयों के साथ एकीकृत करें, और इम्पोर्टमैप का उपयोग करके जावास्क्रिप्ट निर्भरता को प्रभावी ढंग से प्रबंधित करें।

आवश्यक शर्तें

शुरू करने से पहले, सुनिश्चित करें कि आपके पास निम्नलिखित हैं:

• रेल 7 एप्लिकेशन सेटअप
• जावास्क्रिप्ट और रेल्स का बुनियादी ज्ञान

रेल्स 7 में स्टिमुलस.जेएस की स्थापना

Rails 7 Stimulus.js के लिए डिफ़ॉल्ट समर्थन के साथ आता है। आरंभ करने के लिए, यह चलाकर सुनिश्चित करें कि स्टिमुलस आपके एप्लिकेशन में शामिल है:

rails new my_app
cd my_app

आप ऐप/जावास्क्रिप्ट/नियंत्रकों में स्टिमुलस नियंत्रक पा सकते हैं।

एक प्रोत्साहन नियंत्रक बनाना

आइए एक साधारण क्लिक इवेंट को संभालने के लिए एक स्टिमुलस कंट्रोलर बनाएं। निम्नलिखित कमांड चलाएँ:

rails generate stimulus hello

यह ऐप/जावास्क्रिप्ट/नियंत्रक में एक नया नियंत्रक hello_controller.js उत्पन्न करेगा। फ़ाइल खोलें और निम्नलिखित कोड जोड़ें:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

अपने HTML में, स्टिमुलस नियंत्रक का उपयोग करें:

  

  Greet

जब बटन पर क्लिक किया जाता है, तो टेक्स्ट "हैलो, वर्ल्ड!" में बदल जाएगा।

अन्य जावास्क्रिप्ट पुस्तकालयों के साथ एकीकरण

स्टिमुलस.जेएस अन्य जावास्क्रिप्ट पुस्तकालयों के साथ निर्बाध रूप से काम कर सकता है। उदाहरण के लिए, आइए jQuery को Stimulus.js के साथ एकीकृत करें।

सबसे पहले, इंपोर्टमैप का उपयोग करके jQuery जोड़ें:

अपने config/importmap.rb में jQuery जोड़ें:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

फिर, अपने स्टिमुलस नियंत्रक में jQuery आयात करें:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

जावास्क्रिप्ट निर्भरता का प्रबंधन

रेल 7 में जावास्क्रिप्ट निर्भरता को प्रबंधित करना इंपोर्टमैप के साथ सीधा है। यहाँ कुछ युक्तियाँ हैं:

• एक लाइब्रेरी जोड़ें: एक नई लाइब्रेरी जोड़ने के लिए अपने config/importmap.rb में "library_url" पर "library_name" पिन का उपयोग करें।
• एक लाइब्रेरी हटाएं: मौजूदा लाइब्रेरी को हटाने के लिए config/importmap.rb से संबंधित लाइन को हटा दें।
• लाइब्रेरी अपडेट करें: config/importmap.rb में यूआरएल को नवीनतम संस्करणों में अपडेट करें।
• पुरानी लाइब्रेरी जांचें: नए संस्करण उपलब्ध हैं या नहीं यह देखने के लिए config/importmap.rb में यूआरएल पर जाएं।

आप अपने प्रोजेक्ट में कस्टम जावास्क्रिप्ट फ़ाइलें भी जोड़ सकते हैं। उन्हें ऐप/जावास्क्रिप्ट फ़ोल्डर में रखें और जहां आवश्यक हो उन्हें आयात करें।

निष्कर्ष

स्टिमुलस.जेएस आपके रेल एप्लिकेशन में जावास्क्रिप्ट कार्यक्षमता जोड़ने का एक शक्तिशाली लेकिन सरल तरीका प्रदान करता है। इसे अन्य जावास्क्रिप्ट पुस्तकालयों के साथ एकीकृत करके, आप एक समृद्ध और गतिशील उपयोगकर्ता अनुभव बना सकते हैं। अपनी जावास्क्रिप्ट निर्भरताओं को उचित रूप से प्रबंधित करने से यह सुनिश्चित होता है कि आपका एप्लिकेशन रखरखाव योग्य और अद्यतित बना रहे।

हैप्पी कोडिंग!