多くのボタンとデータベースが更新されたフラスコ

Question

私はミニ・ツイートのようなWebアプリケーションを作ろうとしています。投稿はデータベースから引き出され、次の画像のように、各投稿に対して「投票」ボタンが表示されます。

各ポストはid、author、body、およびlikes性質を持っています。議事録をクリックすると、likesプロパティを更新する必要があります。

私の質問はどのボタンをクリックするかを決定する方法です。この場合、route()関数とhtmlテンプレートの良い戦略は何でしょうか？

私は各ボタンに名前を付け加え、post.idを名前に入れて、requestがあるかどうかをチェックしていました。しかし、手の前に投稿の数は分かっていないので、のチェックをroute()の機能でどう書かなければならないのですか？

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

と現在のroute()を次のように私の現在のテンプレートがある

それを行うにはきれいな方法は、あなたのbuttonタグで、データ属性を追加することです。この

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

Answer 1

のようなもので、 upvote/downvoteごとに1つのAjaxリクエストを行います。あなたのケースでは

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

、それはdata-idと呼ばれることになります。

ボタンがクリックされたときにその後、あなたのJavaScriptでは、このデータ属性値を取得し、そのようにあなたのURLを作る：

/upvote/<data-id> 

とAjax GETリクエストを使用してそれを呼び出す（そうページにはありませんリフレッシュ）。

は今フラスコ側などのIDを取得：

@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 

とJavaScript側の

は再び、あなたがフラスコからのあなたの答えを得るとき、それに応じてボタンを更新します。

インスタンスのためのあなたのupvoteボタンに別のクラスを置くと仮定：upvote_button、あなたはjQueryのを使用して、あなたのjavascriptは、次のようになります。返信用

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