Handlebars

<!-- القالب -->
<div class="user-profile">
  <h1>{{user.name}}</h1>
  <p class="email">{{user.email}}</p>

  <!-- التكرار -->
  <ul class="skills">
    {{#each user.skills}}
      <li>{{this}}</li>
    {{/each}}
  </ul>

  <!-- الشروط -->
  {{#if user.isPremium}}
    <span class="badge">عضو مميز</span>
  {{else}}
    <span class="badge">عضو عادي</span>
  {{/if}}

  <!-- Helpers -->
  <p>{{formatDate user.createdAt "YYYY-MM-DD"}}</p>
  <p>{{toUpperCase user.name}}</p>

  <!-- Partials -->
  {{> userCard user=activeUser class="highlighted"}}

  <!-- مسارات مركبة -->
  {{user.address.city}}
  {{../company.name}}
</div>

<!-- Partials - ملف _userCard.hbs -->
<div class="user-card {{class}}">
  <h3>{{user.name}}</h3>
  <p>{{user.email}}</p>
</div>

<!-- JavaScript -->
<script>
// تسجيل Helpers
Handlebars.registerHelper('formatDate', function(date, format) {
  return new Date(date).toLocaleDateString();
});

Handlebars.registerHelper('toUpperCase', function(str) {
  return str.toUpperCase();
});

// استخدام القالب
const template = Handlebars.compile(document.querySelector('#template').innerHTML);
const html = template({
  user: {
    name: 'أحمد محمد',
    email: 'ahmed@example.com',
    isPremium: true,
    skills: ['JavaScript', 'React', 'Node.js'],
    address: { city: 'القاهرة' },
    createdAt: '2024-01-15'
  }
});

document.querySelector('#output').innerHTML = html;
</script>