🧗🏾 🔆 📏 भुगतान के लिए चालान। Sails.js, ractive.js, Backbone.js पर कार्य अनुप्रयोग 🔋 😋 👨🏿‍🚀

अच्छे दिन, सप्ताहांत में, बोरियत और काम की कमी से, मैंने एक छोटा सा आवेदन लिखकर खुद का मनोरंजन करने का फैसला किया जो दो अद्भुत पुस्तकालयों की क्षमताओं की खोज के लिए एक शैक्षिक सामग्री के रूप में काम करेगा - ractive.js और sails.js

समस्या का बयान

काम के बाद, एक को अक्सर अगले कार्य को पूरा करने के बाद (मैं एक फ्रीलांसर हूं) सेवाओं के लिए भुगतान के लिए ग्राहक को चालान करना होगा। खासकर यदि आप कानूनी संस्थाओं से निपटते हैं। ऐसा करने के लिए, मैंने एक सरल HTML-टेम्प्लेट का उपयोग किया जिसमें मैंने अपने हाथों से डेटा दर्ज किया, अगले वाले को सही किया ...

यह कुछ इस तरह दिखता है

मैं मानता हूं, शैलियों और लेआउट freshbooks.com से चुराए गए हैं, जो मैंने अपने समय में उपयोग किया था। दुर्भाग्य से, रूसी ग्राहकों के लिए यह मुझे सूट नहीं करता था, और मेरे लिए एक सरल html-टेम्पलेट पर्याप्त था।

प्रौद्योगिकी चयन

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

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

क्लाइंट पर मैंने ractive.js के साथ खेलने का फैसला किया। और बाद में बैकबोन.जेएस को जोड़ने का निर्णय लिया गया - मुख्य रूप से मॉडल के साथ सुविधाजनक काम के कारण।

इस उदाहरण से पहले, मुझे sails.js और ractive.js का अनुभव नहीं था। काम में मैंने केवल रीढ़ की हड्डी का उपयोग किया।

आइए शुरू करते हैं,

सर्वर

हमारे उदाहरण के लिए, हम sails v0.10 का उपयोग करेंगे - यह अभी भी बीटा में है, लेकिन वर्तमान स्थिर संस्करण 0.9.x की तुलना में, इसमें कई अच्छे हैं जो काम में आते हैं। विशेष रूप से, मॉडल असोकेशन , जो आपको एक-से-कई, कई-से-कई (और मॉडल के बीच अन्य संबंधों) को निर्दिष्ट करने की अनुमति देता है, वह भी 0.10 में ग्रंट टास्क सिस्टम को फिर से डिज़ाइन किया गया है। गोदी में 0.10 पर, सब कुछ बहुत स्पष्ट रूप से लिखा गया है

s0 v0.10 को npm के माध्यम से वितरित किया जा सकता है (मैंने विश्व स्तर पर स्थापित किया है)

sudo npm install -g "git://github.com/balderdashy/sails.git#v0.10"

चेक

 sails -v

0.10.0 - उत्कृष्ट

एक कंकाल sailsjs अनुप्रयोग बनाना

हम एक नया एप्लिकेशन बनाते हैं, उदाहरण के लिए, इनवॉयसर और निर्भरता

 sails new invoicer cd invoicer npm install

अगला, sails lift

कमांड को चलाकर, आप बिल्ट-इन एक्सप्रेस.जेएस सर्वर को चला सकते हैं localhost:1337

API इकाइयाँ बनाना (मॉडल)

हम आवेदन के लिए 3 मॉडल की आवश्यकता होगी:

user

- उपयोगकर्ता जानकारी संग्रहीत करने के लिए
invoice

- खातों की सूची के लिए
task

- खाते में कार्यों के लिए (चालान)

sails generate api <api_name>

का उपयोग करके sails generate api <api_name>

एपीआई पीढ़ी

 zaebee@zaeboo$ sails generate api user debug: Generated a new model `User` at api/models/User.js! debug: Generated a new controller `user` at api/controllers/UserController.js! info: REST API generated @ http://localhost:1337/user info: and will be available the next time you run `sails lift`. zaebee@zaeboo$ sails generate api invoice debug: Generated a new model `Invoice` at api/models/Invoice.js! debug: Generated a new controller `invoice` at api/controllers/InvoiceController.js! info: REST API generated @ http://localhost:1337/invoice info: and will be available the next time you run `sails lift`. zaebee@zaeboo$ sails generate api task debug: Generated a new controller `task` at api/controllers/TaskController.js! debug: Generated a new model `Task` at api/models/Task.js! info: REST API generated @ http://localhost:1337/task info: and will be available the next time you run `sails lift`.

उसके बाद, एपीआई / नियंत्रक फ़ोल्डर में 3 फाइलें दिखाई देंगी

 -rw-r--r-- 1 146  28 17:15 InvoiceController.js -rw-r--r-- 1 143  28 17:15 TaskController.js -rw-r--r-- 1 143  28 17:15 UserController.js

एपीआई / मॉडल भी

 -rw-r--r-- 1 146  28 17:15 Invoice.js -rw-r--r-- 1 143  28 17:15 Task.js -rw-r--r-- 1 143  28 17:15 User.js

आसान और सरल पालों ने हमारे लिए 3 तरीके बनाए,

localhost:1337/user

localhost:1337/invoice

localhost:1337/task

जो CRUD ऑपरेशन का समर्थन करते हैं। उनके लिए भी उपनाम हैं, उदाहरण के लिए, localhost:1337/user/create?name=Andrey&address=Russia

localhost:1337/user/create?name=Andrey&address=Russia

- एक नया उपयोगकर्ता उदाहरण बनाएगा। आप पोस्टमैन के माध्यम से खेल सकते हैं

मैं आपको नियंत्रकों पर प्रलेखन पढ़ने के लिए भी सलाह देता हूं

भंडारण विन्यास (DB)

निर्मित डेटा कहाँ संग्रहीत किया जाता है? डिफ़ॉल्ट रूप से, एक डिस्क को भंडारण के रूप में उपयोग किया जाता है, जो कि सेटिंग्स config/connections.js

config/models.js

और config/models.js

में इंगित किया गया है

config / connection.js कोड

 module.exports.connections = { localDiskDb: { adapter: 'sails-disk' }, someMysqlServer: { adapter : 'sails-mysql', host : 'YOUR_MYSQL_SERVER_HOSTNAME_OR_IP_ADDRESS', user : 'YOUR_MYSQL_USER', password: 'YOUR_MYSQL_PASSWORD', database: 'YOUR_MYSQL_DB' }, someMongodbServer: { adapter : 'sails-mongo', host : 'localhost', port : 27017, //user : 'username', //password : 'password', database : 'invoicer' }, somePostgresqlServer: { adapter : 'sails-postgresql', host : 'YOUR_POSTGRES_SERVER_HOSTNAME_OR_IP_ADDRESS', user : 'YOUR_POSTGRES_USER', password : 'YOUR_POSTGRES_PASSWORD', database : 'YOUR_POSTGRES_DB' } };

हम अभिलेखों को संग्रहीत करने के लिए मोंगो का उपयोग करेंगे, इसके लिए हम कॉन्फिग / मॉडल्स को थोड़ा संशोधित करेंगे।

config / model.js कोड

 /** * Models * (sails.config.models) * * Unless you override them, the following properties will be included * in each of your models. */ module.exports.models = { // Your app's default connection. // ie the name of one of your app's connections (see `config/connections.js`) // // (defaults to localDiskDb) connection: 'someMongodbServer' };

हम उपयोगकर्ता, इनवॉइस और टास्क मॉडल के क्षेत्रों का वर्णन करते हैं जिनकी हमें आवश्यकता है

एपीआई / मॉडल / User.js

 module.exports = { attributes: { name: 'string', email: 'string', avatar: 'string', address: 'text', account: 'text', invoices: { collection: 'invoice', via: 'owner', } }, };

एपीआई / मॉडल / चालान.जेएस

 module.exports = { attributes: { total_amount: 'float', name: 'string', address: 'text', owner: { required: false, model: 'user', }, tasks: { required: false, collection: 'task', via: 'invoice', } }, };

एपीआई / मॉडल / टास्क.जेएस

 module.exports = { attributes: { name: 'string', description: 'text', hours: 'float', rate: 'float', invoice: { required: false, model: 'invoice', via: 'tasks', } }, };

मोंगो एडॉप्टर का उपयोग करने के लिए, आपको पाल्स-मोंगो पैकेज स्थापित करना होगा

 npm install sails-mongo@0.10

कंट्रोलर के लिए `एक्शन` और इसके लिए एक टेम्प्लेट (दृश्य) जोड़ना

हमें एक नियंत्रक बनाने की आवश्यकता है जो हमारे मुख्य कार्य के लिए एक पृष्ठ उत्पन्न करेगा (एक चालान बनाना):

 sails generate controller main generate

हमने एक नया MainController.js

बनाया, जिसमें एक generate

फंक्शन बनाया जाता है, तथाकथित एक्शन

यदि आप url पर जाते हैं localhost:1337/main/generate

localhost:1337/main/generate

हम देखेंगे कि generate

फंक्शन हमारे पास क्या है

डिफ़ॉल्ट रूप से यह json लौटा देगा

 return res.json({ todo: 'Not implemented yet!' });

हम ब्राउज़र में html पेज देखना चाहते हैं। ऐसा करने के लिए, उपरोक्त कोड को बदलें

 return res.view()

हम ब्राउज़र में पृष्ठ ताज़ा करते हैं और एक त्रुटि देखते हैं

 { "view": { "name": "main/generate", "root": "/home/zaebee/projects/invoicer/views", "defaultEngine": "ejs", "ext": ".ejs" } }

इसका मतलब है कि हमने देखने के लिए कोई खाका नहीं बनाया है। नियंत्रकों के लिए सभी HTML टेम्प्लेट दृश्य फ़ोल्डर में हैं और उनके पास निम्न views/<controller_name>/<action_name>

एक खाली दृश्य / मुख्य / उत्पन्न टेम्पलेट बनाएँ

 zaebee@zaeboo$ mkdir views/main zaebee@zaeboo$ touch views/main/generate.ejs

डिफ़ॉल्ट रूप से, ejs का उपयोग टेम्पलेट इंजन के रूप में किया जाता है। पाल कई अस्थायी इंजनों का समर्थन करता है और आप इसे अपने पसंदीदा में config / views.js फ़ाइल में बदल सकते हैं:

ejs, jade, handlebars, mustache 
      

        
        
        
      

     underscore, hogan, haml, haml-coffee, dust 
      

        
        
        
      

     atpl, eco, ect, jazz, jqtpl, JUST, liquor, QEJS, 
      

        
        
        
      

     swig, templayed, toffee, walrus, & whiskers

चेतावनी! 0.10 संस्करण में, लाइवआउट्स के लिए समर्थन केवल ईजे के साथ काम करता है। संक्षेप में, एक बुनियादी views/layout.ejs

। views/layout.ejs

जिसमें से अन्य सभी views/layout.ejs

विरासत में मिले हैं। और टेम्पलेट इंजन का उपयोग करते समय, ejs के अलावा कोई विरासत नहीं होगी। यदि आप इंजन विकल्प को config/views.js

में बदलते हैं, तो यह स्पष्ट करता है

 warn: Sails' built-in layout support only works with the `ejs` view engine. warn: You're using `hogan`. warn: Ignoring `sails.config.views.layout`...

ग्राहक

सर्वर तैयार है, चलिए हमारे चालान एप्लिकेशन के क्लाइंट भाग को लिखना शुरू करते हैं।

स्थैतिक कनेक्शन

सभी स्टेटिक्स (या पब्लिक क्लाइंट कोड) एसेट फोल्डर में हैं। अपने टेम्पलेट में नई फ़ाइलों को जोड़ने के लिए, बस उन्हें उचित फ़ोल्डर में रखें (संपत्ति / जेएस में स्क्रिप्ट, परिसंपत्तियों / शैलियों में शैली, संपत्ति / टेम्पलेट में ग्राहक टेम्पलेट) और उनके ग्रन्ट कार्य के साथ पाल उन्हें आपके सूचकांक / लेआउट में लिखेंगे। .ejs - विशेष वर्गों में:

स्रोत फ़ाइल / साक्षात्कार /layout.ejs की सूची

  <!DOCTYPE html> <html> <head> <title>New Sails App</title> <!-- Viewport mobile tag for sensible mobile support --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--STYLES--> <link rel="stylesheet" href="/styles/importer.css"> <!--STYLES END--> </head> <body> <%- body %> <!--TEMPLATES--> <!--TEMPLATES END--> <!--SCRIPTS--> <script src="/js/dependencies/sails.io.js"></script> <!--SCRIPTS END--> </body> </html>

हम cdn के माध्यम से अपने लेआउट के लिए आवश्यक पुस्तकालयों (Jquery, Underscore, Backbone, Ractive) को कनेक्ट करेंगे, साथ ही bootstrap.min.css

app.css

और assets/styles

फ़ोल्डर में तैयार app.css

फ़ाइल app.css

। हम assets/js/vendor

फोल्डर और assets/js

फोल्डर में एक खाली app.js

फाइल के लिए अतिरिक्त js भी रख सकते हैं, moment.ru.js

आपको जरूरत है ( bootstrap.min.css

, moment.ru.js

and moment.min.js

- तारीखों के साथ काम करने के लिए एक लाइब्रेरी) assets/js

। sails lift

और देखें कि अब हमारे पास फाइल views/layout.ejs

स्रोत फ़ाइल / साक्षात्कार /layout.ejs की सूची

  <!DOCTYPE html> <html> <head> <title>New Sails App</title> <!-- Viewport mobile tag for sensible mobile support --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--STYLES--> <link rel="stylesheet" href="/styles/app.css"> <link rel="stylesheet" href="/styles/bootstrap.min.css"> <link rel="stylesheet" href="/styles/importer.css"> <!--STYLES END--> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script src="//cdn.ractivejs.org/latest/ractive.min.js"></script> <script src="//api.filepicker.io/v1/filepicker.js"></script </head> <body> <%- body %> <!--TEMPLATES--> <!--TEMPLATES END--> <!--SCRIPTS--> <script src="/js/dependencies/sails.io.js"></script> <script src="/js/app.js"></script> <script src="/js/vendor/bootstrap.min.js"></script> <script src="/js/vendor/moment.min.js"></script> <script src="/js/vendor/moment.ru.js"></script> <!--SCRIPTS END--> </body> </html>

महान, पाल ने हमारे लिए सब कुछ किया। सच है, एक माइनस है - वेंडर स्क्रिप्ट हमारे app के नीचे जुड़े हुए हैं। हम tasks/pipeline.js

फ़ाइल को ठीक करते tasks/pipeline.js

यह बताते हैं कि विक्रेता फ़ोल्डर को पहले जोड़ा जाना चाहिए:

कार्यों / पाइपलाइन की सूची का हिस्सा। जेएस फाइल

 ...... // CSS files to inject in order // // (if you're using LESS with the built-in default config, you'll want // to change `assets/styles/importer.less` instead.) var cssFilesToInject = [ 'styles/**/*.css' ]; // Client-side javascript files to inject in order // (uses Grunt-style wildcard/glob/splat expressions) var jsFilesToInject = [ // Dependencies like sails.io.js, jQuery, or Angular // are brought in here 'js/dependencies/**/*.js', 'js/vendor/**/*.js', //   vendor // All of the rest of your client-side js files // will be injected here in no particular order. 'js/**/*.js' ]; ........

क्लाइंट भाग की तैयारी पूरी हो गई है - हम सीधे आवेदन के व्यापार तर्क को लिखने के लिए आगे बढ़ सकते हैं।

पेज लेआउट कंकाल बनाना। Ractive.js टेम्प्लेट

आइए फिर से हमारे लेआउट पर एक नज़र डालें। इस पर, मैंने उन ब्लॉकों पर प्रकाश डाला, जिन्हें हम अपने गतिशील डेटा से बांधेंगे।

चलिए फाइल व्यू / मेन / जेनरेट में बुनियादी मार्कअप बनाते हैं। जेएस जिसमें हमारे क्लाइंट टेम्प्लेट शामिल होंगे

फ़ाइल दृश्य / मुख्य / जनरेटिंग सूची

  <div class="main_bg"> <div class="container primary-content"> <div class="invoice-container rounded-container peel-shadows col-sm-8 col-sm-offset-2"> <h2 style="text-align:center;margin-bottom:30px;">  </h2> <div class="invheader"> <div class="invheader-upper"> <!-- User .       : , ,  --> </div> <div class="invheader-lower"> <!-- Invoice .            --> </div> </div> <div class="invbody"> <div class="invbody-tasks"> <!-- Task .        --> </div> <div class="clearb" style="height: 1px; overflow: hidden;"></div> <div class="invbody-account"> <!-- User  .        --> </div> </div> </div> </div> </div>

तो, मूल मार्कअप तैयार है - यह ractive.js टेम्प्लेट का समय है

हमारे प्रत्येक ब्लॉक के लिए एक टेम्पलेट बनाएं (कुल में चार होंगे) और उन्हें संपत्ति / टेम्पलेट में रखें

संपत्ति / टेम्प्लेट / इनहिडर-अपर-html की सूची

  <div class="invheader-address-account" on-hover="toggleBtn"> <a role="button" title="{{ .editing ? '' : ' ' }}" class="hidden-print btn btn-primary btn-sm hide" on-click="edit"><i class="glyphicon glyphicon-{{ .editing ? 'ok' : 'pencil' }}"></i> </a> <b>:</b> <div class="user-name {{ .editing ? 'editing' : '' }}"> <span>{{^name}} {{/name}}{{name}}</span> {{#.editing}} <div class='edit-container'> <input intro="select" value="{{name}}" class="form-control" placeholder="  "> </div> {{/.editing}} </div> <div class="user-address {{ .editing ? 'editing' : '' }}"> <span>{{^address}}  {{/address}}{{{address}}}</span> {{#.editing}} <div class='edit-container'> <textarea value="{{address}}" class='edit form-control' placeholder="  ">{{address}}</textarea> </div> {{/.editing}} </div> </div> <div on-hover="togglePicker" class="invheader-logo-container"> <div class="invheader-logo"> {{#avatar}} <img src="{{avatar}}/convert?h=110&w=250" alt="{{name}}"> {{/avatar}} <div class="hidden-print BoardCreateRep {{ avatar ? 'hide' : '' }}"> <input type="filepicker-dragdrop" data-fp-mimetype="image/png" data-fp-apikey="A3lXl09sRSejY4e0pOOSQz" data-fp-button-class="btn btn-primary hidden-print" data-fp-button-text=" " data-fp-drag-text="  " data-fp-drag-class="hidden-print drop-avatar" onchange="app.user.fire('setAvatar', event)"> </div> </div> </div>

परिसंपत्तियों / टेम्प्लेट / इनवॉल्डर-लोअर.html की सूची

  <div class="invheader-address-client" on-hover="toggleBtn"> <a role="button" title="{{ .editing ? '' : ' ' }}" class="hidden-print btn btn-primary btn-sm hide" on-click="edit"><i class="glyphicon glyphicon-{{ .editing ? 'ok' : 'pencil' }}"></i> </a> <b>:</b> <div class="cleint-name {{ .editing ? 'editing' : '' }}"> <span>{{^invoice.name}} {{/invoice.name}}{{invoice.name}}</span> {{#.editing}} <div class='edit-container'> <input intro="select" value="{{invoice.name}}" class="form-control" placeholder="   "> </div> {{/.editing}} </div> <div class="client-address {{ .editing ? 'editing' : '' }}"> <span>{{^invoice.address}}  {{/invoice.address}}{{{invoice.address}}}</span> {{#.editing}} <div class='edit-container'> <textarea value="{{invoice.address}}" class="edit form-control" placeholder="   ">{{invoice.address}}</textarea> </div> {{/.editing}} </div> </div> <div class="invheader-invoicedetails"> <table cellspacing="0"> <tbody> <tr> <th> </th> <td>#{{ lastFour(invoice.id) }}</td> </tr> <tr> <th>           </th> <td>{{ date(invoice.createdAt) }}</td> </tr> <tr class="invheader-invoicedetails-balance"> <th><div>             </div></th> <td><div> {{^invoice.total_amount}}0.00{{/invoice.total_amount}}{{ invoice.total_amount }}       </div></td> </tr> </tbody> </table> </div>

संपत्ति / टेम्प्लेट / इनवॉइस-टास्क.html की सूची

  <table class="invbody-items" cellspacing="0"> <thead> <tr> <th class="first"><div class="item">      </div></th> <th><div class="description">,        </div></th> <th><div class="unitcost"> ()</div></th> <th><div class="quantity">      </div></th> <th class="last"><div class="linetotal"> ()</div></th> </tr> </thead> <tbody> {{#tasks}} <tr> <td style="width: 160px;"> <a on-tap="destroy:{{this}}" role="button" class='hidden-print destroy'></a> <div on-click="edit" class="item">{{name}}</div> <input intro="select" class="form-control hide" value="{{name}}" on-blur-enter="hide:{{this}}"> </td> <td> <div on-click="edit" class="description">{{description}}</div> <textarea class="form-control hide" value="{{description}}" on-blur-enter="hide:{{this}}">{{description}}</textarea> </td> <td style="width: 85px;"> <div on-click="edit" class="unitcost">{{ format(rate) }}</div> <input class="form-control hide" value="{{rate}}" on-blur-enter="hide:{{this}}"> </td> <td style="width: 80px;"> <div on-click="edit" class="quantity">{{ format(hours) }}</div> <input class="form-control hide" value="{{hours}}" on-blur-enter="hide:{{this}}"> </td> <td style="width: 90px;"> <div class="linetotal">{{ format(rate * hours) }}</div> </td> </tr> {{/tasks}} <tr> <td class="hidden-print text-center" colspan="5"> <button on-click="add" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-plus "></i> </button> </td> </tr> </tbody> </table> <table class="invbody-summary" cellspacing="0"> <tbody> <tr> <td class="invbody-summary-clean"> </td> <td style="width: 150px;"><strong> :    </strong></td> <td style="width: 120px;"><strong> {{ total(tasks) }} </strong></td> </tr> <tr class="invbody-summary-paid"> <td class="invbody-summary-clean"> </td> <td style="width: 150px;">    </td> <td style="width: 120px;">-0.00</td> </tr> <tr class="invbody-summary-total"> <td class="invbody-summary-clean"> </td> <td style="width: 150px;"><div><strong>  :    </strong></div></td> <td style="width: 120px;"><div><strong> {{ total(tasks) }} </strong></div></td> </tr> </tbody> </table>

संपत्ति / टेम्प्लेट / इनवॉइस-अकाउंट.html की सूची

  <div class="invbody-terms" on-hover="toggleBtn"> <a role="button" title="{{ .editing ? '' : ' ' }}" class="hidden-print btn btn-primary btn-sm hide" on-click="edit"><i class="glyphicon glyphicon-{{ .editing ? 'ok' : 'pencil' }}"></i> </a> <b>:</b> <div class="user-account {{ .editing ? 'editing' : '' }}"> <span>{{^account}}  {{/account}}{{{account}}}</span> {{#.editing}} <div class='edit-container'> <textarea value="{{account}}" class='edit form-control' placeholder="    ">{{account}}</textarea> </div> {{/.editing}} </div> </div>

सामान्य तौर पर, यह एक नियमित HTML है, जो मूंछों वाले टैग {{}}

से इंटरसेप्टेड है , जिसमें ractive.js अपना डेटा सम्मिलित करता है। आप कुछ निर्देशों on-click="edit"

भी on-click="edit"

- यह क्लिक द्वारा edit

विधि को क्रियान्वित करता है; on-hover="toggleBtn"

, on-tap="destroy:{{this}}"

बाद में इस बिंदु on-tap="destroy:{{this}}"

कवर on-tap="destroy:{{this}}"

, अब हम ractive.js घटनाओं पर डॉक्टर की जांच कर सकते हैं

घटनाक्रम प्लगइन्स के रूप में सक्रिय में जुड़े हुए हैं - तथाकथित प्रॉक्सी-इवेंट। काम करने की घटनाओं के लिए, आपको उन लोगों को डाउनलोड करना होगा जिनकी हमें ज़रूरत है (मैंने घटनाओं के लिए सभी प्लगइन्स डाउनलोड किए हैं) और उन्हें assets/js/vendor

फ़ोल्डर में रखें

बैकबोन के लिए एडाप्टर को उसी फ़ोल्डर में रखें ताकि ractive.js डेटा स्रोत के रूप में बैकबोन मॉडल का उपयोग कर सकें।

डेटा इनिशियलाइज़ेशन। डेटा और टेम्पलेट बाइंडिंग

संक्षेप में बताएं कि इस समय क्या है और इसके परिणामस्वरूप हम क्या प्राप्त करना चाहते हैं

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

सबसे पहले, हमारी खाली assets/js/app.js

में आवश्यक बैकबोन मॉडल assets/js/app.js

:

लिस्टिंग संपत्ति / जे एस / app.js

 var app = app || {}; (function (app) { app.User = Backbone.Model.extend({ urlRoot: '/user', }); app.Invoice = Backbone.Model.extend({ urlRoot: '/invoice', }); app.Task = Backbone.Model.extend({ urlRoot: '/task', }); app.Tasks = Backbone.Collection.extend({ url: '/task', model: app.Task }); })(app);

ठीक है, अब हम एक सक्रिय उदाहरण बनाएंगे जो हमारे app.User मॉडल के लिए बाध्य होगा और हमारी assets/templates/invheader-upper.html

और assets/templates/invbody-account.html

रेंडर करेगा

संपत्ति / js / user.js फ़ाइल बनाएँ

सूचीबद्ध संपत्ति / जेएस / user.js

 var app = app || {}; (function (app) { var backboneUser = new app.User; //    ractive   Ractive.extend //  new Ractive({}),      2   var RactiveUser = Ractive.extend({ init: function (options) { this.data = options.data; this.on({ //      //   `on-click="edit"` edit: function (event) { var editing = this.get('editing'); this.set( 'editing', !editing ); if (editing) { this.data.save(); //     } }, //       //  https://www.inkfilepicker.com //   `onchange="app.user.fire('setAvatar', event)"` setAvatar: function (event) { if (event.fpfile) { var url = event.fpfile.url; this.set('avatar', url); } else { this.set('avatar', null); } this.data.save(); //     }, //        //   `on-hover="togglePicker"` togglePicker: function (event) { if (!this.get('avatar')) return; if ( event.hover ) { $(event.node).find('.BoardCreateRep').removeClass('hide'); } else { $(event.node).find('.BoardCreateRep').addClass('hide'); } }, //        //   `on-hover="toggleBtn"` toggleBtn: function (event) { if ( event.hover ) { $(event.node).find('[role=button]').removeClass('hide'); } else { $(event.node).find('[role=button]').addClass('hide'); } } }); } }); //  RactiveUser    //      `.invheader-upper` app.user = new RactiveUser({ el: '.invheader-upper', template: JST['assets/templates/invheader-upper.html'](), data: backboneUser, adaptors: [ 'Backbone' ], }); //  RactiveUser    //      `.invheader-account` app.account = new RactiveUser({ el: '.invbody-account', template: JST['assets/templates/invbody-account.html'](), data: backboneUser, adaptors: [ 'Backbone' ], }); //    Id  //  id  (   ) //      app.user.observe('id', function(id){ if (id && app.invoice) { app.invoice.data.invoice.set('owner', id); app.invoice.data.invoice.save(); } }); })(app);

कोड काफी सरल है। यहाँ हम बेस क्लास RactiveUser

। आप आमतौर पर new Ractive({})

का उपयोग करके एक उदाहरण बना सकते हैं, लेकिन विशेष रूप से यहां हमें उपयोगकर्ता के लिए 2 तत्वों की आवश्यकता होती है जो एक ही मॉडल से जुड़े होते हैं और जो लगभग एक ही घटनाओं के लिए सब्सक्राइब किए जाते हैं। घटनाओं को स्वयं init

फ़ंक्शन के शरीर में इंगित किया गया है।

आगे बढ़ते हुए, हम सादृश्य assets/js/task.js

और assets/js/task.js

सूचीबद्ध संपत्ति / जेएस / इनवॉइस.जेएस

 var app = app || {}; (function (app) { app.invoice = new Ractive({ el: '.invheader-lower', template: JST['assets/templates/invheader-lower.html'](), data: { invoice: new app.Invoice, //  Backbone  //        {{ date(createdAt) }} date: function (date) { return moment(date).format('D MMMM YYYY'); }, //    {{ lastFour(id) }} lastFour: function (str) { return str.slice(-4); } }, adaptors: [ 'Backbone' ], transitions: { select: function ( t ) { setTimeout( function () { t.node.select(); t.complete(); }, 200 ); } } }); app.invoice.on({ //      //   `on-click="edit"` edit: function (event) { console.log(event); var editing = this.get('editing'); this.set( 'editing', !editing ); if (editing) { this.data.invoice.save({owner: app.user.data.id}); } }, //        //   `on-hover="toggleBtn"` toggleBtn: function (event) { if ( event.hover ) { $(event.node).find('[role=button]').removeClass('hide'); } else { $(event.node).find('[role=button]').addClass('hide'); } } }); //      app.invoice.data.invoice.save(); })(app);

संपत्ति / js / task.js को सूचीबद्ध करना

 var app = app || {}; (function (app) { app.tasks = new Ractive({ el: '.invbody-tasks', template: JST['assets/templates/invbody-tasks.html'](), data: { tasks: new app.Tasks, //  Backbone  //     {{ format(price) }} format: function ( num ) { return num.toFixed( 2 ); }, //     {{ total(tasks) }} total: function ( collection ) { var total = collection.reduce(function( sum, el ) { return el.get('rate') * el.get('hours') + sum; }, 0 ); return total.toFixed( 2 ); }, }, adaptors: [ 'Backbone' ], transitions: { select: function ( t ) { setTimeout( function () { t.node.select(); t.complete(); }, 200 ); } } }); app.tasks.on({ //       //   `on-click="add"` add: function ( event ) { var tasks = this.get('tasks'); var task = new app.Task({ name: ' ', description: ' ', hours: 0, rate: 0, }); tasks.add(task); task.save(null, { // ,         success: function() { task.set('invoice', app.invoice.data.invoice.id); task.save(); } }); }, //      //   `on-tap="destroy:{{this}}"` destroy: function ( event, task ) { task.destroy(); }, //       //   `on-click="edit"` edit: function ( event ) { $(event.node).hide(); $(event.node).next().removeClass('hide').focus().select(); }, //     -  //   `on-blur-enter="hide"` hide: function ( event, task ) { $(event.node).addClass('hide'); $(event.node).prev().show(); task.save({invoice: app.invoice.data.invoice.id}); }, }); //     `hours`  `rate`   //    //      // TODO       app.tasks.observe('tasks.*.hours tasks.*.rate', function(tasks, old, keypath){ var total = this.data.total(this.data.tasks); app.invoice.data.invoice.set('total_amount', total); }); })(app);

यहां, कोड पर्याप्त स्पष्ट है, घटनाओं के लिए टिप्पणी जोड़ दी गई है। यह अनिवार्य रूप से सभी क्लाइंट कोड है। मैंने id के आधार पर एक स्थिर चालान बनाने के लिए विधि को तेज करने की योजना बनाई (उदाहरण के लिए, localhost:1337/main/generate/535ea7aa6113230d773fd160

localhost:1337/main/generate/535ea7aa6113230d773fd160

) या api pdfcrowd.com का उपयोग करें, सौभाग्य से उनके पास नोड के लिए एक मॉड्यूल है जो आपको url द्वारा पीडीएफ बनाने की अनुमति देता है ... हालांकि, मैंने सप्ताहांत पर ऐसा करने का प्रबंधन नहीं किया। अब मैं ctrp + P (प्रिंट भेजने के लिए) -> "प्रिंट टू फाइल" के माध्यम से पीडीएफ बना रहा हूं। और अनावश्यक एचटीएमएल तत्वों (उदाहरण के लिए, बटन) से बाहर न निकलने के लिए - उनके लिए एक hidden-print

क्लास जोड़ा।

सर्वर पर तैनात करें

यह लगभग सभी है - आवेदन तैयार है। यह उदाहरण गितुब पर है

सर्वर पर, हम रिपॉजिटरी को क्लोन करते हैं, निर्भरता स्थापित करते हैं और उत्पादन मोड में पाल चलाते हैं:

 node app.js --port=8000 --prod

उत्पादन मोड में काम कर रहे डेमो को लॉन्च किया

सारांश

सेल्ज और एक्टिव दोनों के साथ काम करने का परिणाम बहुत प्रसन्न था।

Selsjs - पेशेवरों:

+ पसंद किया गया कि कैसे आसान एपीआई में बनाया जाता है

+ बहुत अच्छा विन्यास विकल्प, टेम्पलेट इंजन, डेटाबेस से शुरू होता है, और ORM का उपयोग किया जाता है (मैं sails के लिए bookhelfjs.org पेंच करने की योजना बना रहा हूं)

+ मुझे बहुत पसंद आया कि ऐसे तैयार किए गए ग्रन्ट कार्य हैं जो दोनों ठेस और नौकरानी बंडलों के निर्माण का एक अच्छा काम करते हैं।

+ एक कमांड ( sails www

) है जो केवल क्लाइंट-साइड कोड एकत्र करता है - सामने और सर्वर संचालन को अलग करने के लिए सुविधाजनक है।

+ बहुभाषी समर्थन (उपयोग नहीं किया जाता है, लेकिन मुझे पता है कि यह क्या है)

विपक्ष:

- फिलहाल, मॉडल की असावधानियों का छोटा काम (मैं समझता हूं कि v0.10 अभी भी बीटा है, लेकिन v0.9.x में यह बिल्कुल भी नहीं है)

- केवल लेआउट के लिए समर्थन ejs टेम्पलेट्स

Ractivejs - pluses -

+ बैकबोन

+ एक्स्टेंसिबिलिटी को बांधने की क्षमता () आप अपने खुद के प्लगइन्स लिख सकते हैं)

+ मूंछों पर आधारित एक सुविधाजनक टेम्पलेट इंजन (मैं ईजेएस की तरह नहीं हूं - यह मेरे लिए बहुत भारी है)

+ अच्छा डॉक, उदाहरण और सक्रिय ट्यूटोरियल

- मैंने कई दिनों के उपयोग के लिए कोई भी विपक्ष नहीं पाया।

आपका ध्यान देने के लिए धन्यवाद।

भुगतान के लिए चालान। Sails.js, ractive.js, Backbone.js पर कार्य अनुप्रयोग