Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Dodawanie komentarza

Add comment

W tym momencie użytkownik może dodać komentarz za pomocą bilioteki składnika amp-form. Zauważ, że obecność formularza jest warunkowa, w zależności od stanu składnika amp-access:

<form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">[/kod źródłowy]</form>

Określamy metodę POST i działanie XHR, ponieważ działania inne niż XHR są niedozwolone w przypadku metod POST w AMP. Ponieważ jest to demo, nie będą to trwałe komentarze, więc można dodać tylko jeden komentarz naraz; za każdym razem, gdy dodawany jest komentarz, serwer AMPByExample odpowiada, zwracając odpowiedź JSON zawierającą wprowadzony tekst z pewnymi dodatkami, takimi jak sygnatura czasowa, awatar i nazwa użytkownika.

Oto przykład odpowiedzi JSON:

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

Składnik formularza po prostu wyświetli te wartości wewnątrz strony za pomocą szablonu amp-mustache:

<div submit-success="">   <template type="amp-mustache">     <div class="comment-user">       {amp-img3}{/amp-img3}       <div class="card comment">         <p><span class="user">{{User}}</span><span class="date">{{Datetime}}</span></p>         <p>{{Text}}</p>       </div>     </div>   </template> </div> 

W tym przykładzie sprawdzamy tylko, czy wartość komentarza nie jest pusta; jeśli wartość jest pusta, zwracamy błąd, który powoduje wykonanie następującego kodu

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

Jako dodatkowy akcent, dodajemy atrybut required, aby wymusić obecność tekstu komentarza przed przesłaniem komentarza:

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

Po dodaniu komentarza i kliknięciu przycisku przesyłania, powinno teraz zostać wyświetlone coś podobnego do poniższego zrzutu ekranu: