हैंडलबार्स का उपयोग कैसे करें

वर्तमान में, डेटा को अपडेट करने और DOM ट्री में हेरफेर करके गतिशील इंटरफेस बनाने के लिए वेबसाइटें जावास्क्रिप्ट का उपयोग कर रही हैं। यदि आप एक टेम्पलेट इंजन का उपयोग करते हैं जो दृश्य / नियंत्रक टेम्पलेट को लागू करता है, तो कोड क्लीनर हो जाता है, इसे संशोधित करना आसान है।

हैंडलबार्स का उपयोग करना

पहली बात यह है कि हैंडलबार्स कनेक्ट करें:

<script src="js/handlebars.js"></script> 

हैंडलबार्स JSON डेटा से HTML उत्पन्न करता है। हैंडलबार्स पैटर्न को पहचानने के लिए ब्राउज़र के लिए, हमें इसे बाद में संदर्भित करने के लिए टाइप टेक्स्ट / एक्स-हैंडल-टेम्प्लेट , साथ ही एक आईडी निर्दिष्ट करना होगा। एक टेम्प्लेट बनाने के लिए मार्कअप जो एक नाम प्राप्त करेगा और HTML इस तरह दिख सकता है:

 <ul class="updates"> <script id="template" type="text/x-handlebars-template"> <li> <h2>{{name}}</h2> </li> </script> </ul> 

नाम JSON से प्राप्त किया जाएगा और {{name}} के लिए प्रतिस्थापित किया जाएगा। इसके बाद, आपको डेटा स्रोत निर्दिष्ट करना होगा:

 var data = { name : 'John Doe' }, 

हमने एक साधारण JSON ऑब्जेक्ट बनाया, जिसमें 'जॉन डो' के साथ एक संपत्ति है, जिसे हम HTML में रखना चाहते हैं। लेकिन पहले, हमें टेम्पलेट कोड को संकलित करने और इसे HTML में .updates वर्ग के साथ संलग्न करने की आवश्यकता है , जो JSON डेटा ऑब्जेक्ट को एक पैरामीटर के रूप में पारित कर रहा है:

 var template = Handlebars.compile( $('#template').html() ); $('.updates').append( template(data) ); 

आइए JSON डेटा ऑब्जेक्ट में अधिक गुण जोड़कर कार्य को थोड़ा जटिल करें:

  var data = { name: 'Jane Doe', update: 'Just Made my Breakfaast', from: 'Web', location: 'Canada' }, 

और टेम्पलेट को संशोधित करें:

 <li> <h2>{{name}}</h2> <p>{{{update}}}</p> <span> Sent From: {{from}} - In: {{location}} </span> </li> 

महान, लेकिन क्या होगा यदि हम एक से अधिक उपयोगकर्ता को JSON ऑब्जेक्ट में जोड़ना चाहते हैं?

 var data = { updates: [ { name: 'Jane Doe', update: 'Just Made my Breakfaast', from: 'Web', location: 'Canada' }, { name: 'John Doe', update: 'What is going on with the weather?', from: 'Phone', } ]}, 

अब सरणी को बायपास करने के लिए, आपको प्रत्येक के साथ HTML को लपेटना होगा:

 {{#each updates}} <li> <h2>{{name}}</h2> <p>{{{update}}}</p> <span> Sent From: {{from}} - In: {{location}} </span> </li> {{/each}} 

एक समस्या है - हमारे पास एक जॉन डो स्थान नहीं है, और खाली स्ट्रिंग प्रदर्शित नहीं करने के लिए, आप इसमें शामिल कर सकते हैं:

 {{#each updates}} <li> <h2>{{name}}</h2> <p>{{{update}}}</p> <span> Sent From: {{from}} {{#if location}} - In: {{location}}</span> {{/if}} </span> </li> {{/each}} 

आप यह भी दिखा सकते हैं कि उपयोगकर्ता ने कोई स्थान निर्दिष्ट नहीं किया है:

 {{#if location}} - In: {{location}}</span> {{else}} - Location not provided by the user</span> {{/if}} 

निष्कर्ष

लेख में हैंडलबार्स की संभावनाओं का केवल एक छोटा सा हिस्सा शामिल है। कभी-बदलते डेटा वाले एप्लिकेशन के लिए हैंडलबार एक बढ़िया विकल्प है। अत्यधिक tryhandlebarsjs.com पर जाने की सलाह देते हैं।

यह लेख हैंडलबार्स का उपयोग कैसे करें का अनुवाद है।