डर्बी सीखना 0.6 उदाहरण # 1

पिछले कुछ महीनों में, मैं डर्बी (प्रतिक्रियाशील फुलस्टैक जावास्क्रिप्ट फ्रेमवर्क) पर विकसित कई परियोजनाओं में भाग ले रहा हूं। उनमें से कुछ उत्पादन में काफी सफलतापूर्वक काम करते हैं, कुछ निकट भविष्य में शुरू होते हैं।



जब मैं इस तकनीक का अध्ययन कर रहा था, तब कई विचार उठे। सबसे पहले, इस तकनीक के बारे में बहुत कम जानकारी है: प्रलेखन दुर्लभ है, और जो लेख लिखे गए हैं (मैं अंग्रेजी के बारे में बात कर रहा हूं) आमतौर पर उन लोगों द्वारा लिखे जाते हैं जिन्होंने इसे अध्ययन करने में एक या दो दिन बिताए। दूसरे, ऐसे लोगों का एक छोटा समूह है जो इस तकनीक से अच्छी तरह से वाकिफ हैं और अपनी परियोजनाओं में इसका इस्तेमाल करते हैं, जिससे शुरुआती समस्याओं का सफलतापूर्वक हल हो गया है।



मेरा विचार सरल है - प्राप्त ज्ञान को साझा करने के लिए, अगर यह निश्चित रूप से दिलचस्प और मांग में होगा। मैं डर्बी-उदाहरण परियोजना से कुछ उदाहरण लेना चाहता हूं और उन्हें छांटना चाहता हूं। या तो उन्हें खरोंच से फिर से बनाकर, रास्ते में, किसी विशेषज्ञ के दृष्टिकोण से, निर्माण के तर्क की व्याख्या करें, या, एक समाप्त उदाहरण का उपयोग करके, उन क्षणों को समझाएं जिनका पिछले उदाहरणों में खुलासा नहीं किया गया था। संक्षेप में, यदि आप इसे पसंद करते हैं, तो मैं 5-6 उदाहरणों को पार्स करना चाहता हूं।

संस्करण 0.6

हम डर्बी संस्करण 0.6 का अध्ययन करेंगे। संस्करण 0.6 अल्फा 5 वर्तमान में जारी किया गया है। यह हमारे लिए पर्याप्त है कि हम अपनी सभी परियोजनाओं को 0.5 से स्थानांतरित करना शुरू करें। नई परियोजनाएं सभी विशेष रूप से 0.6 पर बनाई गई हैं। उदाहरण के लिए, type4fame 0.6 में किया गया मेरा दोस्त का शौक प्रोजेक्ट है।



संस्करण 0.5 की तुलना में, निश्चित रूप से, सब कुछ बेहतर के लिए बदल गया है। रूपरेखा कोड संरचित और समझने योग्य है, प्रतिपादन में तेजी आई है, विचारों में मनमाने ढंग से अभिव्यक्ति का उपयोग करने का अवसर प्रकट हुआ है। नई घटक प्रणाली आपको बड़े अनुप्रयोगों को अच्छी तरह से संरचना करने की अनुमति देती है। कम कनेक्टिविटी वाले भागों में विभाजित करें। संक्षेप में, मेरे पास केवल सकारात्मक छापें हैं।



न्याय के लिए, यह यहाँ जोड़ने लायक है कि यह अभी भी एक अल्फा संस्करण है, और रचनाकारों के पास अवास्तविक TODOs का एक निश्चित सेट है, और त्रुटियां भी होती हैं (और निश्चित होती हैं)।

प्रशिक्षण स्तर

जल्दी से डर्बी दर्ज करने के लिए मुझे उन मुख्य चीजों को सूचीबद्ध करना होगा जिन्हें आपको जानना और समझना है:

1. वेब विकास का मूल ज्ञान (html, css, जावास्क्रिप्ट);
2. नोडज - आपको आमजन मॉड्यूल को समझने की आवश्यकता है, एनपीएम, पता है कि एक मानक http सर्वर कैसे शुरू किया जाए;
3. एक्सप्रेसज - डर्बी एप्लिकेशन एक्सप्रेस एप्लिकेशन के शीर्ष पर बनाए जाते हैं, इसलिए एक्सप्रेस और सर्वर जेएस (कनेक्टिंग मॉड्यूल, प्रोसेसिंग अनुरोध, आदि) के बारे में कुछ बुनियादी ज्ञान होना अच्छा होगा।

तकनीकों का एक निश्चित सेट भी है जो डर्बी में उपयोग किया जाता है और उनके साथ परिचित होने से बहुत मदद मिलेगी (हालांकि यह अनिवार्य नहीं है, हम धीरे-धीरे इस सभी को छू लेंगे)

1. प्रतिक्रियाशील प्रोग्रामिंग
2. आइसोमॉर्फिक जावास्क्रिप्ट अनुप्रयोग
3. परिचालन रूपांतरण - Google डॉक्स में दस्तावेजों को संपादित करते समय संघर्ष को हल करने के लिए Google द्वारा विकसित एक तकनीक
4. browserify
5. MongoDB

मंच

लिनक्स, मैक हमारे लिए करेंगे। विंडोज़ के साथ समस्याएं हो सकती हैं - संस्करण 0.5 ने विंडोज़ के तहत ठीक काम किया (हालांकि मुझे खुद को रेडिस संस्करण 2.6 संकलित करना था), संस्करण 0.6 इसके लिए भी काम करता है, लेकिन कुछ ऐसे पुल-अनुरोध हैं जो अभी तक मुख्य भंडार तक नहीं पहुंचे हैं, इसलिए अभी तक शुरुआती हैं इंतजार के लायक।



विकास शुरू करने से पहले, आपको यह सुनिश्चित करने की आवश्यकता है कि निम्नलिखित कंप्यूटर पर स्थापित हैं:

1. NodeJS
2. MongoDB
3. रेडिस 2.6 (नोट संस्करण 2.4 उपयुक्त नहीं है) - अपडेट रेडिस की अब आवश्यकता नहीं है

सब कुछ डिफ़ॉल्ट सेटिंग्स के साथ सेट किया गया है। आवेदन चल रहा है उस समय मोंगा और मूली चल रहा होगा।

तो चलिए शुरू करते हैं

आइए एक उदाहरण देखें: https://github.com/zag2art/derby-example-hello । यह बहुत सरल है, लेकिन कई स्पष्टीकरण होंगे।



आप अपने आप को एक समाप्त उदाहरण की नकल कर सकते हैं और इसका अध्ययन कर सकते हैं, या आप इसे स्वयं खरोंच से भर सकते हैं। मैं दूसरे विकल्प की सलाह देता हूं, इसे मेमोरी में बनाए रखना बेहतर है, लेकिन अपने लिए चुनें, मैं दोनों विकल्पों की व्याख्या करूंगा।



मेरी रिपॉजिटरी से कॉपी करें:

#    git clone https://github.com/zag2art/derby-example-hello.git #     cd derby-example-hello #   (   derby  derby-starter) npm install #             localhost:3000 npm start
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हम सभी फाइलें खुद बनाते हैं (डैडी बनाने और उसे दर्ज करने के बाद):



हम npm npm init



का उपयोग करके मानक रूप से package.json



बनाते हैं (स्टार्टअप फ़ाइल के रूप में server.js निर्दिष्ट करें), फिर npm के माध्यम से दो मॉड्यूल भी जोड़ें:

 #       0.6 (    npm   0.5),    package.json npm install derby@~0.6 -S #  derby-starter npm install derby-starter -S
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

derby-starter



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



सामान्य स्थिति में, यह कोड डर्बी एप्लिकेशन के अंदर स्थित होगा, क्योंकि इसे पूरक करने की आवश्यकता होगी, उदाहरण के लिए, पासपोर्ट के माध्यम से प्राधिकरण को जोड़ने के लिए, racer-access



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



server.js

 require('derby-starter').run(__dirname+'/index.js');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हम डर्बी के सर्वर भाग को शुरू करते हैं, जो पैरामीटर गुणवत्ता में index.js फ़ाइल के लिए पथ को इंगित करता है, जिसमें हमारा डर्बीज एप्लिकेशन स्वयं स्थित है।



तो, आवेदन 2 फ़ाइलों के होते हैं: index.js

 var app = module.exports = require('derby').createApp('hello', __filename); app.loadViews(__dirname); //        app.get('/', function(page, model) { //     model.subscribe('hello.message', function() { page.render(); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और index.html

 <Body:> <!--    html     --> Holler: <input value="{{hello.message}}"> <h2>{{hello.message}}</h2>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पहले, उन्हें टाइप करें, एप्लिकेशन चलाएं, इसके साथ खेलें, और फिर स्रोत कोड का विश्लेषण करें। इसलिए, सभी फाइलें एक ही फ़ोल्डर में हैं: package.json, server.js, index.js और index.html। डर्बी और डर्बी-स्टार्टर मॉड्यूल स्थापित हैं और उपनिर्देशिका नोड_मॉड्यूल्स में स्थित हैं, मोंगो और रेडिस स्थापित और चल रहे हैं।



हम आवेदन शुरू करते हैं (npm शुरू, अच्छी तरह से, या सीधे - नोड server.js):

 zag2art@laptop:~/work/derby-example-hello$ npm start > derby-example-hello@0.0.0 start /home/zag2art/work/derby-example-hello > node server.js Master pid 11291 11293 listening. Go to: http://localhost:3000/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ब्राउज़र खोलें, पता दर्ज करें http: // localhost: 3000 / , और इनपुट के लिए कुछ भेजें, उदाहरण के लिए:





हम जो देखते हैं, जो हमने दर्ज किया था, वह h2 ब्लॉक में दोहराया गया था, इनपुट के नीचे, प्रतिक्रियाशील बाइंडिंग यहां काम करते हैं। एक और प्रयोग, उसी पते के साथ एक और टैब खोलने का प्रयास करें http: // localhost: 3000 / । हम पहले दर्ज किए गए पाठ को देखते हैं। यही है, डेटा टैब के बीच सिंक्रनाइज़ किया जाता है (और यदि हमारा आवेदन इंटरनेट पर पोस्ट किया गया था, तो बिल्कुल सभी ग्राहकों के बीच)। आइए डेटा को बदलने का प्रयास करें। परिवर्तन तुरंत पड़ोसी टैब में परिलक्षित होगा, बिना किसी अनावश्यक ब्लिंकिंग के, अर्थात्, डेटा को अपडेट करते समय, पृष्ठ का आवश्यक हिस्सा सीधे क्लाइंट पर फिर से बनाया जाता है। अगला, दूसरे टैब में पृष्ठ के स्रोत कोड को देखें:







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



अब आइए डर्बी में निर्धारित सिद्धांतों पर एक नज़र डालें, साथ ही साथ स्रोत कोड भी। सबसे पहले सोचने वाली बात यह है कि किस प्रणाली की आवश्यकताएं रचनाकारों से होती हैं:

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

इसलिए, रचनाकारों ने निम्नलिखित को समझा, यदि पृष्ठ सर्वर से अनुरोध किया गया है, तो आपको इसे वहां उत्पन्न करने और इसे तैयार करने की आवश्यकता है, यदि उपयोगकर्ता ब्राउज़र में एप्लिकेशन में काम कर रहा है, तो उसे यूआरएल को बदलना नहीं चाहिए, हर बार सर्वर तक पहुंचें, प्रतीक्षा करें, एक स्क्रीन फ़्लिकर प्राप्त करें। मैं भी वास्तव में पेज रेंडरिंग कोड की नकल नहीं करना चाहता। यही है, हमें सर्वर और क्लाइंट दोनों पर पेज रेंडर करने में सक्षम होना चाहिए, न कि कोड डुप्लिकेट करना चाहिए। क्लाइंट और सर्वर पर हमारे पास जावास्क्रिप्ट है - यह चीजों को आसान बनाता है। लेकिन क्या ऐसा करना संभव भी है। यह पता चला है कि हमें रेंडरिंग पेज (templatization, html के साथ काम करना) और राउटिंग (क्लाइंट पर एड्रेस बदलते समय url के साथ काम करना) के लिए जिम्मेदार कोड क्लाइंट और सर्वर दोनों पर चाहिए, और यह पता चलता है कि हमें उसी तरह की जरूरत है डेटा तक पहुंच व्यवस्थित करें। ऐसा कोड, जो क्लाइंट और सर्वर दोनों पर समान काम करता है, इसे आइसोमॉर्फिक कहा जाता है, आप इसके बारे में यहां पढ़ सकते हैं। डर्बी में इसे लागू किया गया है।



यह निकला डर्बी में 2 भाग हैं:

1. केवल सर्वर से संबंधित भाग (विभिन्न सेटिंग्स, मॉड्यूल कनेक्ट करना, एक्सप्रेसजेस के लिए बाध्य करना)। कृपया ध्यान दें कि कोई प्रतिपादन या रूटिंग नहीं है। हमारे मामले में, यह डर्बी-स्टार्टर मॉड्यूल के साथ server.js फ़ाइल है।
2. समद्विबाहु अनुप्रयोग ही। जब सर्वर से पृष्ठ का अनुरोध किया जाता है, तो उसका कोड सर्वर पर निष्पादित किया जाता है और फिर कोड क्लाइंट पर चलता है। हमारे मामले में, ये index.js और index.html फाइलें हैं।

मुझे दूसरे भाग के बारे में अधिक बात करने की कोशिश करने दें। कल्पना कीजिए कि हमने एक डर्बी एप्लिकेशन बनाया है जो 3 पृष्ठों के साथ काम करता है:

1. /
   
   
   
   - साइट का मुख पृष्ठ
2. /about
   
   
   
   - निर्माता जानकारी पृष्ठ
3. /projects
   
   
   
   - परियोजनाओं के साथ पेज

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



तो, अब index.js कोड को देखते हैं:

 var app = module.exports = require('derby').createApp('hello', __filename); app.loadViews(__dirname); //        app.get('/', function(page, model) { //     model.subscribe('hello.message', function() { page.render(); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सबसे पहले, मुझे कहना होगा कि index.js एक सामान्य .js मॉड्यूल है, अर्थात, हम, उदाहरण के लिए, आसानी से किसी भी मॉड्यूल को कनेक्ट कर सकते हैं जो क्लाइंट और सर्वर दोनों पर काम कर सकते हैं। यहाँ, उदाहरण के लिए, इस तरह: var _ = require('underscore');



। पहली पंक्ति में, डर्बी जुड़ा हुआ है और प्रारंभिक है।

 app.loadViews(__dirname);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहां हम दिखाते हैं कि हमारे पास टेम्पलेट फाइलें कहां हैं। इस मामले में, हमने उसी फ़ोल्डर को इंगित किया जिसमें index.js झूठ है, जंगल वहां दिखेगा और index.html ढूंढेगा। हमारे पास एक न्यूनतम प्रशिक्षण अनुप्रयोग है, यही कारण है कि सब कुछ एक फ़ोल्डर में है, आमतौर पर एक ही टेम्पलेट विचारों के सबफ़ोल्डर में अलग-अलग होते हैं। सिद्धांत रूप में, अगर हमारे पास css शैलियाँ होतीं, तो यहाँ हम कुछ इस तरह लिखते:

 //      app.loadViews (path.join(__dirname, '../views')); app.loadStyles(path.join(__dirname, '../styles'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

उदाहरण के लिए, एक index.css फ़ाइल हो सकती है (ठीक है, या तो index.styl या index.less - डर्बी उनका समर्थन करता है)। स्वाभाविक रूप से, यह फ़ाइल अपने स्वयं के सबफ़ोल्डर संरचना के साथ शामिल हो सकती है।



आगे बढ़ो, और फिर प्रसंस्करण कोड यूआरएल। योजनाबद्ध रूप से, यदि हम उस एप्लिकेशन को बनाते हैं जिसे मैंने वर्णित किया था (3 कामकाजी महिलाओं के लिए) - यहाँ होगा:

 app.get('/', function(page, model) { ... }); app.get('/about', function(page, model) { ... }); app.get('/projects', function(page, model) { ... });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

मैं देख रहा हूँ, है ना? हर चीज के लिए जिसे हमने एक अलग पृष्ठ कहा है, एक हैंडलर होना चाहिए (कोई व्यक्ति नियंत्रक को बताएगा)। हां, यह ध्यान देने योग्य है कि पूरी चीज एक्सप्रेसज के समान है, यहां आप मापदंडों का उपयोग कर सकते हैं, उदाहरण के लिए:

 app.get('/users/:user', getUser);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अधिक जानकारी के लिए यहां देखें।



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

 //       model.fetch('list', function(){ //     //   render }); //   c    model.subscribe('list', function(){ //    , //      //   render });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

तो, हमारे उदाहरण से कोड:

  model.subscribe('hello.message', function() { page.render(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हम 'hello.message' की सदस्यता लेते हैं, और कॉलबैक फ़ंक्शन (जब डेटा को ऊपर खींचा जाता है) में हम रेंडर कहते हैं। यह कई सवाल उठाता है: 'हेलो.मैसेज' क्या है और मापदंडों के बिना क्यों प्रस्तुत किया जाता है (कोई टेम्पलेट नाम या डेटा नहीं है)?



एक डर्बी में, रेसर मॉड्यूल प्रतिक्रियाशील डेटा के साथ काम करने के लिए जिम्मेदार है, जिसमें तथाकथित "पथ" का उपयोग करके सभी डेटा एक्सेस होते हैं। हमारे पास 'hello.message' है - यह वह मार्ग है जहाँ 'hello' मोंगो में संग्रह का नाम है (sql में एक टेबल होगा), 'message' संग्रह में रिकॉर्ड की आईडी है। यही है, हमने यहां हैलो संग्रह में एक एकल प्रविष्टि के लिए साइन अप किया है। यह वह डेटा है जो टेम्पलेट में हमारे इनपुट में आएगा। डेटा और रास्तों के साथ काम करने के बारे में यहाँ पढ़ें।



इसके अलावा, हमने निम्नलिखित कारणों से रेंडर करने के लिए कुछ भी पास नहीं किया है: html के लिए url = / को मुख्य html फ़ाइल में सेट किया गया है (index.html रूट एक है, आयात के माध्यम से इसके साथ कई और जुड़े हो सकते हैं), यह डिफ़ॉल्ट रूप से उपयोग किया जाएगा , लेकिन हमने डेटा पास नहीं किया है, क्योंकि टेम्प्लेट का उपयोग "पथ" तक है।



अब टेम्पलेट फ़ाइल index.html है:

 <Body:> <!--    html     --> Holler: <input value="{{hello.message}}"> <h2>{{hello.message}}</h2>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

 <Title:>   - <Body:> <!--    html     --> Holler: <input value="{{hello.message}}"> <h2>{{hello.message}}</h2>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अंदर, टेम्पलेट इंजन हैंडलबार के समान है। मैं स्पष्टता के लिए कुछ उदाहरण दूंगा (विशेषकर उनके बारे में मत सोचो):

 <Body:> {{if _page.login}} <h3> Hello, friend! </h3> {{/}} {{each _page.todos as #todo, #index}} <p>{{#todo.text}}</p> {{if #index % 5 === 0}} <!-- 0, 5, 10, 15 --> <b></b> {{/}} {{/}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

खैर, बाध्यकारी घटना का एक उदाहरण:

  <a href="#" on-click="{{removeTopic(topic[#index])}}">Ok</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहां हम थोड़ा आगे भागे, लेकिन मुझे लगता है कि यह उचित है। अगले हफ्ते, हम एक "टू-डू लिस्ट" (TODO-list) बनाएंगे, जहाँ इस सबका उपयोग और व्याख्या की जाएगी।



इस बीच, कोड के साथ खेलने के लिए, टेम्पलेट में कुछ जोड़ने की कोशिश करें, शीर्षक बदलें (डर्बी लिवरेलोइंग का समर्थन करता है, अर्थात, जैसे ही आप एचटीएमएल फ़ाइल को बदलते हैं और परिवर्तन को रिकॉर्ड करते हैं, ब्राउज़र पृष्ठ को ताज़ा कर देगा)। शैलियों को जोड़ने का प्रयास करें।



पुनश्च

यदि आप डर्बी पर मानक प्रलेखन पढ़ना चाहते हैं, तो ध्यान रखें कि यह संस्करण 0.5 के लिए लिखा गया है, कुछ हिस्से वहां अप्रासंगिक हैं।

आप वहां क्या पढ़ सकते हैं: नियंत्रक, मॉडल। क्या मूल्य नहीं है: दृश्य, टेम्पलेट, घटक - सब कुछ पहले से ही बदल गया है, आप केवल भ्रमित हो जाएंगे।



पी पी एस

टिप्पणियों में, कृपया लिखें कि आप डर्बी के बारे में क्या सुनना चाहते हैं। सबसे दिलचस्प क्या है? शायद कुछ सवाल हैं? अगर वहाँ है - उन्हें प्यार करने के लिए कहें, तो एक ठोस नींव रखना महत्वपूर्ण है।



अद्यतन

दूसरा उदाहरण http://habrahabr.ru/post/221703/ है

तीसरा उदाहरण है http://habrahabr.ru/post/222399/



यदि आप डर्बीज को पसंद करते हैं - तो जीथब पर तारांकन करने के लिए परेशानी न लें