मैंने Groupon में रत्न गॉन का उपयोग कैसे किया

दूसरे दिन मैंने अपने रत्न गॉन - 4.0.0 का एक नया संस्करण जारी किया और अपनी क्षमताओं और उपयोगों के कुछ उदाहरण देने का फैसला किया। इस लाइब्रेरी का उपयोग MVC आर्किटेक्चर में डेटा के साथ काम करने को सरल बनाने के लिए किया जाता है। यह आपको इस डेटा को दृश्य के माध्यम से फेंकने के चरणों को छोड़ कर जेएस से नियंत्रक डेटा के साथ काम करने की अनुमति देता है। आज RoR अनुप्रयोगों , sinatra- जैसे अनुप्रयोगों (sinatra, padrino, आदि) और .Net MVC के लिए rutting के कार्यान्वयन हैं।

व्यवस्थापक क्षेत्र में नक्शा

मेरा काम ग्रुपोन में प्रादेशिक क्षेत्रों में प्रस्तावों के विभाजन का एहसास करना था, जिसे प्रशासक संपादित कर सकता था। क्षेत्रों के ऑफ़र उन लोगों को दिखाए जाते हैं जो इन क्षेत्रों में अन्य क्षेत्रों के ऑफ़र की तुलना में उच्च प्राथमिकता वाले रहते हैं।


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



मैंने कई डेटा मॉडल बनाए - सिटीअरेआ शहर में प्रादेशिक क्षेत्र के सार का वर्णन करने के लिए, सिटीअप्रॉप्टाउन उन बिंदुओं के निर्देशांक को संग्रहीत करने के लिए जो सिटीआरे शामिल हैं, और एरियाऑफ़र - प्रस्ताव एक विशिष्ट क्षेत्र से संबंधित है। ड्राइंग क्षेत्रों के लिए एक पृष्ठ, जेएस तैयार किया, वस्तुओं को एक दूसरे से जोड़ने के लिए सर्वर तर्क, और पृष्ठ पर डेटा के आउटपुट के बारे में प्रश्न उत्पन्न हुआ। मेरे लिए एमवीसी में मानक विधियों में से एक नियंत्रक कार्रवाई में आवश्यक डेटा का चयन करना है, इसे आवश्यक प्रारूप में संपादित करना है, चर के लिए अंतिम डेटा सरणी लिखना है, और फिर उस तत्व को डेटा विशेषता के साथ जोड़ें जिसमें यह डेटा लिखा जाएगा और जहां से जेएस पढ़ा जाएगा। वें। अर्थात्, मैंने तब कुछ ऐसा किया था:

app/controllers/admin/map_controller.rb

 @location = City.find(params[:city_id].to_i) @offers = Offer.sorted.by_city(@location).by_day(params[:date]) @offers.map! do |offer| points = offer.points.map do |point| { id: it.id, longitude: it.longitude, latitude: it.latitude } end { id: offer.id, permalink: offer.permalink, title: offer.short_title, points: points } end @city_areas = CityArea.find_by_city @location @city_areas.map! do |area| #        end 

app/views/admin/map/map.html.haml

 .data-container{ data: { areas: @city_areas.to_json, offers: @offers.to_json } } 

app/assets/javascripts/admin/map.js

 $('.data-container').data('offers') ... 

परिणाम बहुत व्यस्त नियंत्रक था - बहुत अधिक कोड जो कि नहीं होना चाहिए। आप इसे मॉडल में डाल सकते हैं, लेकिन कोड अभी भी कुछ इस तरह रहेगा। मैंने अपने मणि गॉन का उपयोग करने का फैसला किया, जिसमें रब्बल और जूलरी टेम्पलेट के लिए समर्थन है। रबल एक महान रत्न है जो वस्तुओं के संग्रह के साथ और डेटाबेस ऑब्जेक्ट के संघों के साथ बहुत अच्छा काम करता है, इसलिए टेम्प्लेट के अंदर कोड अधिक इष्टतम है। अच्छी तरह से, गॉन आपको आसानी से और सरल रूप से रब्बल की शक्ति का उपयोग करने की अनुमति देता है:

app/controllers/admin/map_controller.rb

 @location = City.find(params[:city_id].to_i) @offers = Offer.sorted.by_city(@location).by_day(params[:date]) @city_areas = CityArea.find_by_city @location gon.rabl template: 'app/rabl/offers.json.rabl', as: 'offers' gon.rabl template: 'app/rabl/areas.json.rabl', as: 'areas' 

app/rabl/offers.json.rabl

 collection @offers => 'offers' attributes :id, :permalink, :short_title child :points do attributes :id, :latitude, :longitude end 

app/assets/javascripts/admin/map.js

 gon.offers … 

इस प्रकार, डेटा को परिवर्तित करने और जेएस में इस डेटा को फेंकने के लिए न्यूनतम प्रयास खर्च करने के बाद, मुझे "स्वच्छ" नियंत्रक और जेएस में डेटा की आवश्यकता के सरणियों को मिला।

गोन मणि

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

इसके अलावा, कल मैंने संस्करण 4.0.0 जारी किया जिसमें पृष्ठ को फिर से लोड किए बिना एक चर में डेटा अपडेट करने की कार्यक्षमता दिखाई दी - gon.watch । नई कार्यक्षमता आपको किसी ईवेंट के जवाब में, एन-सेकंड और एक-बार के अंतराल के साथ एक चक्र में डेटा को अपडेट करने की अनुमति देती है। एक उदाहरण के रूप में, मैं दिखाऊंगा कि कोड की कुछ पंक्तियों में आप वास्तविक समय में शीर्ष कमांड के परिणाम कैसे प्रदर्शित कर सकते हैं:



मान लीजिए कि हमारे पास एक नया रेल एप्लिकेशन है। टर्मिनल शीर्ष प्रदर्शित करने के लिए, हमें बस निम्नलिखित करने की आवश्यकता है:

1. Gemfile को gem 'gon' लाइन जोड़ें और bundle install चलाएँ

2. एक क्रिया के साथ एक नियंत्रक जोड़ें, उदाहरण के लिए घर # foo, app/views/home/foo.html.erb इसे app/views/home/foo.html.erb और JS app/assets/javascripts/home.js.coffee

 rails g controller home foo 

3. कंट्रोलर एक्शन app/controllers/home_controller.rb टॉप-कमांड के वेरिएबल वन-टाइम को gon.watch पर लिखें:

 def foo gon.watch.top = `top -l1` end 

4. लेआउट app/views/layouts/application.html.erb में, सिर में घड़ी के विकल्प के साथ एक सहायक जोड़ें:

 <head> <%= include_gon(watch: true) %> 

5. app/views/home/foo.html.erb वह टैग जोड़ें जिसमें शीर्ष प्रदर्शित किया जाएगा:

 <pre style='font-family:monospace;'></pre> 

6. कॉफ़ी फ़ाइल में, वह कोड जोड़ें जिसे हम वैरिएबल का अनुसरण करेंगे और पूर्व टैग की सामग्री को अपडेट करेंगे:

 $(document).ready -> renewPre = (data) -> $('pre').html(data.replace(/\\n/, "\n")) gon.watch('top', interval: 1000, renewPre) 

gon.watch दो या तीन मापदंडों को स्वीकार करता है - चर का नाम, विकल्प (वैकल्पिक), कॉलबैक। इस मामले में, हमने interval: 1000 पारित किया interval: 1000 विकल्प, जो हर 1 सेकंड में gon.watch कोड को लूप करेगा। इसका मतलब यह है कि प्रत्येक दूसरा gon.watch नियंत्रक की कार्रवाई के लिए एक अनुरोध भेजता है जिसमें चर को सौंपा गया था और वर्तमान मूल्य लौटाता है, अनुरोध के सफल समापन पर, एक कॉलबैक कहा जाता है, जो बदले में पूर्व टैग की सामग्री को फिर से लिखता है। लूप को रोकने के लिए, एक gon.unwatch फ़ंक्शन है जो मापदंडों को चर नाम और कॉलबैक फ़ंक्शन के रूप में लेता है। स्वाभाविक रूप से, यदि आप interval विकल्प को पास नहीं करते हैं, तो कोई चक्र नहीं होगा, एक बार अनुरोध होगा और यदि सफल होता है, तो एक बार कॉलबैक कॉल।

यह सब है, rails s 0.0.0.0:3000/foo , 0.0.0.0:3000/foo खोलो - हम वहाँ शीर्ष पर रहते हैं।