Swig - Django टेम्पलेट सिंटैक्स के साथ जावास्क्रिप्ट टेम्पलेट इंजन

मैंने देखा कि हैबर पर किसी ने भी उत्कृष्ट जावास्क्रिप्ट टेम्पलेट इंजन स्विग के बारे में नहीं लिखा था।

निकट भविष्य में जावास्क्रिप्ट तेजी से लोकप्रिय हो गया है और नए अप्रत्याशित उपयोग पा रहा है। इसलिए इस प्रवृत्ति ने मुझे पास नहीं किया, इसलिए जब मैंने केवल-फ़न के लिए एक परियोजना विकसित की, तो मैं विरोध नहीं कर सका और सर्वर (JS.JS), वेब क्लाइंट (Backbone.js) पर JS का उपयोग करने की कोशिश करने का फैसला किया - सब कुछ गंभीर है :) और एक मोबाइल एप्लिकेशन (फोनगैप) में। मेरे लिए अगला चरण एक टेम्पलेट इंजन का विकल्प था, और नोड और ब्राउज़र दोनों के लिए समर्थन आवश्यक था। इससे पहले, मैं मुख्य रूप से Django टेम्पलेट भाषा में निपटा, इसलिए चुनाव Swig पर गिर गया।

Swig की विशेषताएं:

• Django टेम्पलेट समान सिंटैक्स
• अत्यधिक उच्च गति ( मानक )
• नोड.जेएस और प्रमुख ब्राउज़रों के लिए समर्थन
• संगतता व्यक्त करें
• खुला स्रोत

नोड तेज

स्थापना

npm install swig 

टेम्पलेट बनाएँ

 <h1>{{ pagename|title }}</h1> <ul> {% for author in authors %} <li{% if loop.first%} class="first"{% endif %}> {{ author }} </li> {% else %} <li>There are no authors.</li> {% endfor %} </ul> 

प्रतिपादन

 var template = require('swig'); var tmpl = template.compileFile('/path/to/template.html'); tmpl.render({ pagename: 'awesome people', authors: ['Paul', 'Jim', 'Jane'] }); 

परिणाम

 <h1>Awesome People</h1> <ul> <li class="first">Paul</li> <li>Jim</li> <li>Jane</li> </ul> 

ब्राउज़र में

ब्राउज़र में स्वाइग का उपयोग करना मूल रूप से नोड में उपयोग करने से अलग नहीं है, दो बिंदुओं को छोड़कर:

• swig.compileFile बजाय, हमेशा swig.compile उपयोग swig.compile
• extends , import और include करने के सही उपयोग के लिए, templateKey निर्दिष्ट किया जाना चाहिए:
  

   swig.compile(templateString, { filename: templateKey }); 

  
  

Hooking

 <script type='text/javascript" src="//path/to/swig/swig.js"> 

टेम्पलेट तैयार करें

 var template = swig.compile('<p>{% block content %}{% endblock %}</p>', { filename: 'main' }); var mypage = swig.compile('{% extends "main" %}{% block content %}Oh hey there!{% endblock %}', { filename: 'mypage' }); 

प्रस्तुत करना

 console.log(mypage.render({})); 

और हम प्राप्त करते हैं

 <p>Oh hey there!</p> 

प्रोजेक्ट पेज
प्रलेखन
जीथब प्रोजेक्ट