amp-mustache

0.2 0.1

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

يسمح بعرض Moustache.js.

[جدول المحتويات]

ملاحظات عن الإصدارات

البنية

Moustache هو بنية نموذج بمنطق أقل. راجِع مستندات Moustache.js للحصول على المزيد من التفاصيل. في ما يلي بعض علامات Mustache الأساسية:

• {{variable}}: علامة متغير تعطي القيمة HTML التي تتضمن حروف إلغاء للمتغير.
• {{#section}}{{/section}}: علامة قسم يمكنها اختبار وجود متغير وتكراره إذا كان مصفوفة.
• {{^section}}{{/section}}: علامة مقلوبة يمكنها اختبار عدم وجود متغير.
• {{{unescaped}}}: HTML لا تتضمن حروف إلغاء ومقيدة من حيث الترميز الذي قد تعطيه (انظر "القيود" أدناه).

الاستخدام

يجب تعريف نموذج amp-mustache واستخدامه وفقًا لمواصفات نماذج AMP.

يجب أولاً إعلان/تحميل amp-mustache على هذا النحو:

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

يمكن بعد ذلك تعريف نماذج Mustache في علامة script أو template هكذا:

<!-- Using template tag. -->
<template type="amp-mustache">
  Hello {{world}}!
</template>

أو

<script type="text/plain" template="amp-mustache">
  Hello {{world}}!
</script>

استخدِم علامة template متى أمكن حيث يوفر التحقق من صحة AMP تلميحات مفيدة عن dev-x. استخدام النموذج script لحالات الحافة ومشاكل إنشاء النموذج في سياق الجداول. راجِع قسم "الجداول" أدناه.

يتم تحديد أسلوب اكتشاف النموذج وموعد عرضه وكيفية توفير البيانات من قبِل عنصر AMP الهدف الذي يستخدم هذا النموذج لعرض محتواه (في شكل amp-list مثلاً أو amp-form أو غيره).

القيود

التحقق

مثل جميع نماذج AMP ، يجب أن تكون نماذج amp-mustache أجزاء DOM جيدة التنظيم. ويعني هذا، من بين أمور أخرى، أنه لا يمكنك استخدام amp-mustache في ما يلي:

• حساب اسم العلامة: على سبيل المثال، <{{tagName}}> غير مسموح به.
• حساب اسم السمة: على سبيل المثال، <div =something> غير مسموح به.

تم تنظيف مخرجات "triple-mustache" لتسمح فقط بالعلامات التالية: a, b, br, caption, colgroup, code, del, div, em, i, ins, li, mark, ol, p, q, s, small, span, strong, sub, sup, table, tbody, time, td, th, thead, tfoot, tr, u, ul.

التنظيف

يتم تنظيف مخرجات Mustache لدواعي الأمان وللحفاظ على صلاحية AMP. قد يؤدي هذا إلى إزالة بعض العناصر والسمات في صمت.

المخاطر

النماذج المدمجة

وفقًا "للتحقق من صحة AMP"، يجب ألا تكون عناصر <template> عناصر ثانوية لعناصر <template> أخرى. يمكن أن يحدث هذا عند دمج مكونَين يستخدمان النماذج، مثل amp-list وamp-form.

للتغلب على هذا، يمكن أيضًا الإشارة إلى عناصر <template> باستخدام id عبر السمة template في المكوِّن. مثال:

<amp-list id="myList" src="https://foo.com/list.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>

يمكن أيضًا تمثيله على النحو التالي:

<!-- Externalize templates to avoid nesting. -->
<template type="amp-mustache" id="myTemplate">
  <div>{{title}}</div>
</template>

<amp-list id="myList" src="https://foo.com/list.json" template="myTemplate">
</amp-list>

الجداول

يجب تحديد سلاسل نماذج AMP في عناصر <template> وهو ما قد يؤدي إلى حدوث سلوك غير متوقع بسبب تحليل المتصفح. يمكن مثلاً أن تتسبب عناصر <table> في إعادة ترتيب العلامات التي بها خلل في الدمج في النص. في المثال التالي:

<template type="amp-mustache">
  <table>
    <tr>
      {{#foo}}<td></td>{{/foo}}
    </tr>
  </table>
</template>

سيعيد المتصفح ترتيب عقد النص {{#foo}} و{{/foo}}:

{{#foo}}
{{/foo}}
<table>
  <tr>
    <td></td>
  </tr>
</table>

تتضمن الحلول التفاف أقسام Mustache في تعليقات HTML (مثل <!-- {{#bar}} -->) باستخدام عناصر لا تخص الجداول مثل <div> بدلاً منه أو باستخدام علامة <script type="text/plain"> لتحديد النماذج.

<script type="text/plain" template="amp-mustache">
  <table>
    <tr>
      {{#foo}}<td></td>{{/foo}}
    </tr>
  </table>
</script>

حروف إلغاء علامات الاقتباس

عند استخدام amp-mustache لحساب قيم السمات، يمكن أن تمثل حروف إلغاء علامات الاقتباس مشكلة. مثال:

<template type="amp-mustache">
  <!-- A double-quote (") in foo will cause malformed HTML. -->
  <amp-img alt="{{foo}}" src="example.jpg" width=100 height=100></amp-img>

  <!-- A single-quote (') or double-quote (") in bar will cause an AMP runtime parse error. -->
  <button on="tap:AMP.setState({foo: '{{bar}}'})">Click me</button>
</template>

لن ينجح استخدام رموز أحرف HTML في المتغير {{foo}} أو {{bar}} حيث إن Moustache سيتضمن أحرف الإلغاء & (مثال: " -> "). يتمثل أحد الحلول البديلة في استخدام أحرف facsimile مثل ′ ( ′ ) و″ ( ″).

هناك اقتراح مفتوح للنقاش بإجراء هذا الاستبدال في amp-mustache بدلاً من ذلك. يرجى التعليق على المشكلة إذا أردت دعمها.

كيانات HTML

لا يتم حفظ كيانات HTML في عناصر <template>.

قد تكون هذه مشكلة إذا أردت عرض <template> يحتوي على نص أنشأه المستخدِمون على جانب الخادم وذلك لأنه سيتم التعامل مع النص الذي يحتوي على {{ و}} و{{{ و}}} كأنه قسم Mustache. لن ينجح مثلاً استبدال {{ بكيانات HTML {{ لأنها لا يتم حفظها عند تحليل المتصفح لـ <template>.

وتشمل الحلول البديلة استبدال السلاسل مثل {{ بأحرف مختلفة أو تجريدها مباشرة من المحتوى الذي أنشأه المستخدِمون.

التحقق

اطِّلع على قواعد amp-mustache في مواصفات مدقق AMP.