我建议不要在这种情况下使用 django 表单。还有一些更方便的方法。
第一种方式。使用纯 jQuery
扩展您的图书课程:
class Book(models.Model):
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=255)
collection = models.ForeignKey(Collection, related_name='books')
def get_vote(self, user):
vote = Vote.objects.filter(book=self, user=user)
if vote:
return vote.vote
else:
return ''
您的观点(如果您愿意,可以在 CBV 上重写):
def list_collection(request, collection_id):
collection = Collection.objects.get(pk=id)
user = request.user
books = []
for item in collection.books.all():
book = {
'id': item.pk,
'name': item.name,
'vote': item.get_vote(user)
}
books.append(book)
return render_to_response('colleciton.html', {'books': books})
def set_vote(request):
id = request.GET('id')
vote = int(request.GET('vote'))
user = request.user
book = Book.objects.get(pk=id)
vote = Vote()
vote.user = user
vote.vote = vote
vote.book = book
vote.save()
return HttpResponse()
您的网址:
url(r'^list-collection/', 'list_collection', name='list_collection'),
url(r'^set-vote/', 'set_vote', name='set_vote'),
你的 Django 模板:
{% extends 'base.html' %}
{% block content %}
{% for book in collection.books.all %}
<div class="book" data-id="{{ book.id }}">
<div class="book-name">{{ book.name]}</div>
<div class="book-vote" {% if not book.get_vote %}style="display:none"{% endif %}>book.get_vote</div>
<div class="voting" {% if book.get_vote %}style="display:none"{% endif %}>
<button class="vote-up"></button>
<button class="vote-down"></button>
</div>
</div>
{% endfor %}
{% endblock %}
而javascript就像
$(document).ready(function(){
$('.vote-up, .vote-down').on('click', function(e){
var id, vote, t, book_el;
e.preventDefault();
t = $(e.currentTarget);
book_el = t.parents().parents()
id = book_el.attr('data-id');
if t.hasClass('vote-up'){
vote = 1;
} else {
vote = -1;
}
book_el.find('.book-vote').show();
book_el.find('.book-vote').text(vote);
book_el.find('voting').hide();
$.get("/set-vote", {vote: vote, id: id});
});
});
第二种方式。使用像 Backbone.js 这样的 JavaScript 框架
它使整个过程变得更加容易。特别是如果您打算向您的应用程序添加一些其他功能。另一方面,Backbone 需要一些时间来学习它。
阅读文档,查看教程应用程序 TodoMVC或其他教程。也许您会发现它更适合您的任务。