如何在play框架中实现一个投票系统？

Question

我正在尝试为 SO 或 reddit 等问题/答案实施投票系统。 到目前为止，我已经嘲笑了一些问题和答案。其中有一个带有箭头的脚本用于upvote / downvote，它改变了箭头的颜色并增加了箭头旁边的数字以指示投票数。

但现在我被困住了。

模拟的答案/问题需要由 Scala 模板生成，而不是由我手动输入。我不知道如何做到这一点。

这是为箭头着色并计算投票的脚本： （不得不提一下，到目前为止只有第一个箭头起作用。这可能是因为ID应该是唯一的，所以第二个箭头会被忽略？）

<script>
    $(document).ready(function() {
        $('#icon').click(function() {
            var $this = $(this);
            $this.css("color","orange");
            var num = $('#num');
            var currentNumber = num.text().length ? parseInt(num.text()) : 0;
            num.text(currentNumber + 1);
        });
    });
</script> 

这是一些带有箭头的答案列表条目和我也手动输入的投票编号的示例：

<li class="list-group-item" > <span id="icon" class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span><span id="num"></span> 7 <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> Die Schleife springt durch <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></li>
<li class="list-group-item" > <span id="icon" class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span><span id="num"></span> 1 <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> Das Programm hängt sich auf <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></li>

这是它目前的样子。

我该如何从这里开始？我对 play 框架很新，它是 scala 模板，所以也许我可以让框架生成一个通用的箭头/投票组合，我可以稍后处理，而不是手动放入这些行？ 我是否必须以某种方式将选票保存在真实数据库中？ 如何进一步处理投票，即如何将它们放入变量中？

StackOverflow 上还有几个问题和我的差不多，但是几乎没有一个是使用 play 框架的。

[编辑]：这是JSfiddle，只需点击最左边的箭头。

Answer 1

假设你有一个类 Question 有一个字段“文本”

class Question {
    long id;
    String text;
}

还有一个类 Answer 有一个字段“文本”

class Answer {
    String text;
}

现在在您的控制器（可能是Application.java）中，首先您会得到问题和相应的答案，然后将它们提供给您的视图：

public static Result showQuestion() {
    Question q = Question.find.byId(1);
    List<Answer> possibleAnswers = Answer.findByQuestion(q);
    return ok(showquestion.render(q, possibleAnswers);
}

现在在你看来你有这个：

@(q: Question, answers: List[Answer])

<h3>@q.text</h3>

<ul>
@for(answer <- answers){
    <li>@answer.text</li>
}
</ul>

当然，答案的标记可以任意复杂（包括投票、箭头、图标等）。