{code0}co{/code0}: تعليق

يمكن للمستخدم في هذه المرحلة إضافة تعليق باستخدام المكتبة amp-form. لاحظ كيف أن وجود النموذج مشروط، وذلك اعتمادًا على حالة المكون amp-access:

<form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">

إننا نحدد طريقة POST وإجراء XHR، لأنه لا يتم السماح بإجراءات غير XHR مع طرق POST في AMP. ونظرًا لأن هذا عرض توضيحي، فنحن لا نواصل التعليقات، لذلك من الممكن فقط إضافة تعليق واحد في ذلك الوقت؛ كلما تمت إضافة تعليق، يرد خادم AMPByExample باستجابة JSON تحتوي على النص المُدخل مع بعض الإضافات، مثل الطابع الزمني والصورة الرمزية واسم للمستخدم.

إليك مثال على استجابة JSON:

{"Datetime":"09:34:21",
"User":"Charlie",
"Text":"Hello!",
"UserImg":"/img/ic_account_box_black_48dp_1x.png"}

سيعرض مكون النموذج هذه القيم داخل الصفحة ببساطة باستخدام قالب amp-mustache:

<div submit-success>
  <template type="amp-mustache">
    <div class="comment-user">
      <amp-img width="44" class="user-avatar" height="44" alt="user" src=""></amp-img>
      <div class="card comment">
        <p><span class="user">{{User}}</span><span class="date">{{Datetime}}</span></p>
        <p>{{Text}}</p>
      </div>
    </div>
  </template>
</div>

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

<div submit-error>
  <template type="amp-mustache">
    Error! Looks like something went wrong with your comment, please try to submit it again.
  </template>
</div>

وكلمسة إضافية، فإننا نضيف السمة required لفرض وجود نص التعليق قبل إرسال التعليق:

<input type="text" class="data-input" name="text" placeholder="Your comment..." required>

عندما تضيف تعليقًا وتنقر فوق زر الإرسال، يجب أن ترى الآن شيئًا مشابهًا للقطة الشاشة التالية: