Kolben mit vielen Tasten und Datenbank-Update

Question

Ich versuche, eine Web-App wie ein Mini-Tweets zu machen. Die Posts werden aus einer Datenbank herausgezogen und ich möchte für jeden Post einen "up vote" Knopf haben, wie das folgende Bild.

Jeder Beitrag hat eine id, author, body und likes Eigenschaft. Wenn auf eine Abstimmung nach oben geklickt wird, muss die Eigenschaft likes aktualisiert werden.

Meine Frage ist, wie Sie feststellen können, auf welche Schaltfläche geklickt wird. Was wäre eine gute Strategie in diesem Fall für die route() Funktion und die HTML-Vorlage?

Ich dachte an einen Namen zu jeder Schaltfläche hinzufügen und post.id in den Namen eingeben, dann überprüfen, ob request es hat. Aber die Anzahl der Beiträge ist nicht bekannt vorher, wie soll ich schreiben request in route() Funktion?

Meine aktuelle Vorlage ist wie folgt

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

und die aktuelle route() ist wie dies

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

Answer 1

Eine saubere Art und Weise, dies zu tun wäre, ein Datenattribut hinzufügen, in Ihrem button Tag und mache eine Ajax-Anfrage per Upvote/Downvote.

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

In Ihrem Fall wäre es data-id genannt werden.

Dann in Ihrem Javascript, wenn die Schaltfläche geklickt wird, diese Daten Attributwert erhalten, und somit Ihre URL als solche:

/upvote/<data-id> 

Und nennt es eine Ajax-GET-Anforderung mit (so wird die Seite nicht Aktualisierung).

Jetzt auf Kolben Seite bekommen die ID als solche:

@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 

Und Javascript Seite wieder, wenn Sie Ihre Antwort von der Flasche aktualisieren entsprechend den Button aus.

Vorausgesetzt, dass Sie eine andere Klasse in Ihrer upvote Taste zum Beispiel setzen: upvote_button und Sie jQuery, könnte Ihr Javascript so aussehen:

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