Yorum ekleme

Bu noktada, kullanıcı amp-form kütüphanesini kullanarak bir yorum ekleyebilir. Formun varlığının, amp-access bileşeninin durumuna bağlı olarak nasıl koşullu olduğuna dikkat edin:

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

AMP'de POST yöntemlerinde XHR olmayan eylemlere izin verilmediğinden, bir POST yöntemi ve bir XHR eylemi belirtiyoruz. Bu bir demo olduğu için yorumlarda ısrarcı değiliz, bu nedenle bir seferde sadece bir yorum eklemek mümkündür; bir yorum eklendiğinde, AMPByExample sunucusu, girilen metni içeren bir JSON yanıtıyla yanıt verir ve bir zaman damgası, bir avatar ve kullanıcı için bir ad gibi bazı eklemeler içerir.

JSON yanıtının bir örneğini burada bulabilirsiniz:

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

Form bileşeni, amp-mustache şablonunu kullanarak bu değerleri sayfanın içinde görüntüleyecektir:

<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>

Bu örnekte, sadece yorumun değerinin boş olup olmadığını kontrol ediyoruz; değer boşsa, aşağıdaki kodun yürütülmesine neden olan bir hata ile yanıt veriyoruz

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

Fazladan bir dokunuş olarak, yorumu göndermeden önce yorum metninin varlığını zorunlu kılmak için required özelliği ekliyoruz:

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

Bir yorum ekleyip gönder düğmesini tıkladığınızda, şimdi aşağıdaki ekran görüntüsüne benzer bir şey görmelisiniz: