Колба с множеством кнопок и обновление базы

Question

Я пытаюсь сделать веб-приложение, как мини-твиты. Посты извлекаются из базы данных, и я хочу, чтобы для каждого поста была кнопка "голосовать", как показано на следующем рисунке.

Каждый пост имеет id, author, body, а также likes имущество. При нажатии на голосование вверх likes свойство должно быть обновлено.

У меня вопрос, как определить, какая кнопка нажата. Что было бы хорошей стратегией в этом случае для route() функция и шаблон HTML?

Я думал о добавлении имени для каждой кнопки и положить post.id во имя, а затем проверьте, если request есть это. Но количество постов не известно заранее, как мне написать 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() это так

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

Answer 1

Чистым способом сделать это было бы добавить атрибут данных в ваш button пометьте и сделайте один запрос ajax на upvote / downvote.

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

В вашем случае это будет называться data-id,

Затем в вашем javascript, когда нажата кнопка, получите это значение атрибута данных и создайте свой URL как таковой:

/upvote/<data-id>

И назовите его, используя ajax GET-запрос (чтобы страница не обновлялась).

Теперь на стороне колбы получите идентификатор как таковой:

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