demo-HTML-over-WebSockets-i.../apps/front/templates/partials/blog/all_articles.html

34 lines
900 B
HTML
Raw Normal View History

2021-03-12 00:09:19 +01:00
<div id="articles">
{% for post in posts %}
<article>
<h2>{{ post.title }}</h2>
<p>Author: {{ post.author }}</p>
<p><button data-id="{{ post.id }}" class="btn">More</button></p>
<hr>
</article>
{% endfor %}
</div>
<ul class="pagination">
<li class="page-item disabled">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
<script>
const buttons = document.querySelectorAll('.btn');
buttons.forEach((button) => {
button.addEventListener('click', event => {
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/single.html",
data: {
id: event.target.dataset.id
}
}))
});
});
</script>