يستغرق 10 دقائق لبدء استخدام المقود

في الوقت الحاضر ، لم يعد تطوير الواجهة الأمامية يتعلق بإنشاء ترميز HTML ثابت وتجميع ملفات SASS. يعني ظهور تطبيقات الصفحة الواحدة (SPAs) أنه يمكننا القيام بالكثير من منطق العرض من جانب العميل. غالبًا ما يتطلب تطوير الويب الحديث إدخال بيانات ديناميكية.

على الرغم من أن React.js رائع ، إلا أنه غالبًا ما يتطلب منحنى تعليميًا للمطورين قبل أن يتمكنوا من دمجه في الفريق. مؤخرًا ، تم تكليفي ببناء الواجهة الأمامية لموقع الدورة التدريبية. كان ذلك بمثابة بداية استكشافي في Handlebars.js.

المقود هو محرك قوالب شائع وبسيط سهل الاستخدام. إنه يشبه إلى حد كبير HTML العادي ، مع تعبيرات المقاود المضمنة في الأقواس المتعرجة {{}}.

{{name}}

{{quote}}

قبل أن ننتقل إلى تفاصيل المقاود ، دعنا نرى كيف سيتم إدراج البيانات في الصفحة من خلال Vanilla Javascript. سوف نأخذ مثالاً على بناء صفحة ويب تسرد بعض الاقتباسات. لأن الجميع يحتاج إلى بعض الإلهام.

جافا سكريبت الفانيليا

استرجاع البيانات

في معظم الأوقات ، قد تقوم باسترداد البيانات عبر ajax ، ولكن من أجل التبسيط ، سننشئ كائن البيانات الخاص بنا.

// quotes.js var quotes = [ {name: "Frank Lloyd Wright", quote: "You can use an eraser on the drafting table or a sledge hammer on the construction site."}, {name: "Douglas Adams", quote: "The major difference between a thing that might go wrong and a thing that cannot possibly go wrong is that when a thing that cannot possibly go wrong goes wrong it usually turns out to be impossible to get at or repair."}, {name: "Ettore Sottsass", quote: "I try and be as stupid as possible regarding my profession, which means I try to look at as few design magazines as possible."}, {name: "Shaun White", quote: "I’m a big fan of doing what you are really bad at. A lot."} ]

إنشاء ترميز HTML

// index.html 

إضافة البيانات بجافا سكريبت

سنستخدم حلقة for للتكرار خلال المحتوى أعلاه.

//quotes.jslet quoteMarkup = '';
for (var i = 0; i < quotes.length; i++) { let name = quotes[i].name, quote = quotes[i].quote;
quoteMarkup += ' ' + '
' + name + '
' + '

' + quote + '

' ' '}
document.getElementById('quotes').innerHTML = quoteMarkup;

مع رمز مثل هذا ، من الصعب قراءته وكتابته مملة. ويوجد الآن ترميز HTML لهذه الصفحة في كل من index.html و quotes.js.

أدخل المقاود

ابدء

للبدء ، نحتاج إلى تضمين ملف التعليمات البرمجية المصدر لـ Handlebar. يمكنك إضافة الرابط داخل علامة الرأس أو قبل نهاية.

بدلاً من ذلك ، يمكنك أيضًا الارتباط بالمقاود من CDN.

قم بإنشاء النموذج

سنستمر في استخدام كائن البيانات للاقتباسات من الملف أعلاه. سنقوم برش بعض سحر المقاود على ملف index.html.

//index.html 
 {{#each this}} 

{{name}}

{{quote}} {{/each}}
  • كل : يتكرر خلال البيانات
  • هذا : R eferencesإلى السياق الحالي.
  • text / x-handlebars-template : لإخبار المتصفح بعدم تنفيذ النص كجافا سكريبت عادي.

قم بتجميع القالب باستخدام المقاود

لا يتطلب الأمر سوى بضعة أسطر لتجميع البيانات باستخدام المقاود. هذا ما أحبه فيه. حتى إذا لم يستخدم شخص ما في الفريق أشرطة المقود من قبل ، فإن النص والترميز يكونان في غاية السهولة بالنسبة لهما في الفهم والتقاط.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • المحتوى : إرجاع العنصر الذي تريد إدراج المعلومات المترجمة فيه.
  • src: Retrieves the markup of the template.
  • Handlebars.compile(src): Compiles the template in use. It will return a function that the data can be passed to so it can be be rendered.
  • template(quotes): Compiles the data into the template.
  • content.innerHTML: Renders the above to the DOM

You can view the project here.

Bonus

I used Handlebars for a multiple-templates website. I found myself writing the same ajax and Handlebars code multiple times. So, here are the two functions that I created to make my life easier.

Getting data from ajax with Javascript

function ajaxGet(url, callback) { let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // console.log(xmlhttp.responseText); try { var data = JSON.parse(xmlhttp.responseText); } catch(err) { console.log(err.message +' Getting: ' + url); return; } callback(data); } };
xmlhttp.open("GET", url, true); xmlhttp.send();}

Function to run Handlebars

function runHandlebars(id, dataSrc, src) { if(document.getElementById(id) != null) { let content = document.getElementById(id); ajaxGet(dataSrc, function(data){ let source = document.getElementById(src).innerHTML, template = Handlebars.compile(source);
content.innerHTML = template(data); }); }}

With these two functions, I could run all my Handlebars code on a single Javascript file. It will look something like this.

runHandlebars('nav-sub-1', '/data/courses.json', 'nav-submenu-template');
runHandlebars('contributors', '/data/contributors.json', 'contributors-template');

Conclusion

كانت تجربتي مع المقاود تجربة إيجابية. في مشروعي ، أستخدمه مع البلع والمعادن. هل سأستخدمه لمشاريع أخرى؟ رأيي هو أنني أفضل شيئًا مثل React أو مولد موقع ثابت كامل مثل Jekyll. ولكن في هذه الحالة ، عندما يكون الفريق أكثر راحة مع ترميز HTML ويكون موقعًا بسيطًا نسبيًا ، فإن Handlebars يعد خيارًا جيدًا.