如何在游戏框架中实现投票系统？

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，其中包含一个字段'text'

class Question {
    long id;
    String text;
}

一个班级Answer，其中包含一个字段'text'

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>

当然，答案的标记可以像您一样复杂（使用投票，箭头，图标等）。