دليل القوالب باستخدام Handlebars.js: دوال ومساعدي الكتل

القوالب باستخدام Handlebars

Handlebars.compile()

تُستخدم دالة Handlebars.compile() لإنتاج دالة قوالب. يجب تمرير سلسلة قوالب تحتوي على تعبيرات إلى Handlebars.compile(). تأخذ هذه الدالة بعد ذلك كائنًا كوسيط، وتدمج قيم الكائن في تعبيرات القالب، وتعيد سلسلة HTML مكتملة.

const template = '<span>{{greetingMsg}}</span>';
const templateFunction = Handlebars.compile(template);
const html = templateFunction({ greetingMsg: 'Greetings from the club!' });
console.log(html); // <span>Greetings from the club!</span>

مساعد كتلة {{each}} في Handlebars

يُعتبر مساعد كتلة {{each}} في Handlebars مساعدًا مدمجًا يمكنه قبول مصفوفة للتكرار عبرها. داخل كتلة {{each}}, يكون this بمثابة عنصر نائب لقيمة التكرار الحالية.

const template = `<ul>
{{#each serialList}}
  <li>{{this}}</li>
{{/each}}
</ul>`;

const templateFunction = Handlebars.compile(template);
const htmlStr = templateFunction({ serialList: [202, 204, 338, 342, 400] });
console.log(htmlStr);
/* Output:
<ul>
  <li>202</li>
  <li>204</li>
  <li>338</li>
  <li>342</li>
  <li>400</li>
</ul>
*/

مساعدي الكتل في Handlebars

تأتي Handlebars مع مساعدي كتل مدمجين يسمحون لنا بتضمين HTML أو تعبيرات أخرى بين علامات تعبير المساعد.

يحتوي التعبير المبدئي لمساعد الكتلة على # قبل الكلمة المفتاحية، ويحتوي التعبير النهائي على / متبوعًا بنفس الكلمة المفتاحية للإشارة إلى النهاية.

{{#blockName}}
  محتوى النص في الكتلة
  <p>عنصر فقرة HTML</p>
{{/blockName}}

مكتبة Handlebars.js في JavaScript

Handlebars.js هي مكتبة JavaScript تُستخدم لإنشاء قوالب صفحات ويب قابلة لإعادة الاستخدام. القوالب هي مزيج من HTML والنص والتعبيرات. تُدرج التعبيرات في مستند HTML وتُحيط بأقواس مزدوجة.

تعمل هذه التعبيرات كعناصر نائبة للمحتوى ليتم إدراجه بواسطة كود Handlebars.js في مستند JavaScript الخاص بنا. عند استدعاء دالة القالب المُجمعة، يتم استبدال القيم في التعبيرات.

<script id="spaceCraft" type="text/x-handlebars-template">
  <p>{{spacecraftName}} هبطت أول إنسان على القمر.</p>
</script>

Handlebars.js وعنصر <script>

يمكن استخدام عنصر HTML <script> بقيمة نوع text/x-handlebars-template لاحتواء نص القالب وتعبيرات Handlebars.js. يتيح ذلك كتابة قوالب Handlebars.js داخل مستند HTML.

<script id="handlebars-template" type="text/x-handlebars-template">
  <p>مرحبًا {{loggedInUser}}</p>
</script>

مساعد كتلة {{if}} في Handlebars

يُعد مساعد كتلة {{if}} في Handlebars واحدًا من المساعدين المدمجين الذين يقومون بتوجيه تشغيل كتلة من الكود بناءً على شرط. يحتوي الكود التالي على مثال لاستخدامه.

const template = `<h1>
{{#if quotaFull}}
  الرجاء العودة غدًا.
{{/if}}
</h1>`;

const templateFunction = Handlebars.compile(template);
const completedHtml = templateFunction({ quotaFull: true });
console.log(completedHtml); // <h1>الرجاء العودة غدًا.</h1>

تعبير {{else}} في Handlebars

يمكن إدراج تعبير {{else}} في مساعد كتلة {{if}}. تأتي محتويات القالب داخل قسم else عندما تكون الشروط السابقة غير صحيحة. في المثال التالي، يتم تعيين isAdult إلى false. لذلك، لن يكون النص “You can enter the ride.” موجودًا في سلسلة القالب المُعادة.

const template = `<span>
{{#if isAdult}}
  يمكنك الدخول إلى اللعبة.
{{else}}
  يجب أن يرافقك وصي.
{{/if}}
</span>`;

const templateFunction = Handlebars.compile(template);
const htmlStr = templateFunction({ isAdult: false });
console.log(htmlStr); // <span>يجب أن يرافقك وصي.</span>