flacon avec de nombreux boutons et mise à jour de la base de données

Question

J'essaie de faire une application web comme un mini-tweets. Les messages sont retirés d'une base de données et je veux avoir un bouton «up vote» pour chaque message, comme l'image suivante.

Chaque poste a un id, author, body et likes propriété. Lorsqu'un clic sur un clic est effectué, la propriété likes doit être mise à jour.

Ma question est comment déterminer quel bouton est cliqué. Quelle serait une bonne stratégie dans ce cas pour la fonction route() et le modèle html?

Je pensais ajouter un nom à chaque bouton et mettre post.id dans le nom, puis vérifier si request l'a. Mais le nombre de messages ne sont pas connus à l'avance, comment dois-je écrire la fonction route() vérifier request?

Mon modèle actuel est le suivant

<table class="table table-striped"> 
{% for post in posts %} 
<tr> 
<td> {{ post.id }} </td>             
<td> <img src="{{ post.author.avatar(50) }}"> </td>       
<td> <b>{{ post.body }}</b> </td>                        
<td> <button type="button" name='{{'up.'+ post.id|string}}' class="btn btn-default"> 
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 
</button> 
{{ post.likes}} </td> 
</tr> 
{% endfor %} 
</table> 

et la route() actuelle est comme ce

@bbs.route('/', methods=['GET', 'POST'])         
def index():                
    posts = Post.query.all()            
    return render_template('bbs/index.html', posts=posts) 

Answer 1

Une manière propre de le faire serait d'ajouter un attribut de données, dans votre balise button et faire une requête ajax par upvote/downvote.

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

Dans votre cas, il serait appelé data-id.

Puis dans votre javascript, lorsque le bouton est cliqué, obtenir cette valeur d'attribut de données et CRAFT votre URL en tant que tels:

/upvote/<data-id> 

et l'appeler à l'aide d'une requête ajax GET (pour que la page ne rafraîchir).

maintenant sur le côté du flacon obtenir l'ID en tant que tel:

@app.route('/upvote/<post_id>') 
def upvote(post_id): 
    print('%s upvoted' % post_id) 
    # do your db update here and return a json encoded object 

Et encore javascript côté, quand vous obtenez votre réponse de flacon, mettez à jour votre bouton en conséquence.

En supposant que vous mettez une autre classe dans votre bouton upvote par exemple: upvote_button et que vous utilisez jQuery, votre javascript pourrait ressembler à ça:

<script type='text/javascript'> 
$('.upvote_button').click(function(ev){ 
    var id = $(ev.currentTarget).attr('data-id'); 
    $.get("/upvote/" + id, function(data) { 
     // change your button here, and remove its upvote_button class 
     alert(data); 
    }); 
}); 
</script>