Question

我正在尝试创建一个使用播放框架的网页，该网页显示用户的姓名，出生日期等。卡住的地方是试图在html页面中显示未知尺寸的列表。我目前有：

@(currentUser : Profile)

@main("Profile") {
    <div>
        <h1><b>@currentUser.getFirstName() @currentUser.getLastName()</b></h1>
        <p>@currentUser.getDateofBirth</p>
        <b>Nationalities</b>
        <ul><p id="natInput"></p></ul>
        <script>
            for (var i = 0; i < "@currentUser.getNationalities().size()"; i++) {
                document.getElementById("natInput").innerHTML += "<li>" + "@currentUser.getNationalities().get(i)" + "</li>";
            }
        </script>
    </div>
}

Profile是一个基本的Java类，仅包含getter和setter，.getNationalities返回一个List。 @Main是另一个html文件，用于存储网站的基本设计，与此无关。

如您所见，我正在尝试使用.get方法为用户浏览国籍列表，但不幸的是，在get中使用的“ i”变量无法识别，因为它是一个javascript变量在html中。该代码的所有其他部分似乎均按预期方式工作，并且将“ i”替换为整数（例如0或1）时，.get可以正常工作。

有什么想法可以让我获得此列表中的每个元素？任何帮助将不胜感激

Answer 1

问题是您弄乱了页面生成的不同步骤。

首先，我们应该清除从Play控制器中的render命令到浏览器中完整呈现的页面的处理步骤。

Twirl是一个模板引擎，可让您使用Scala生成HTML页面。在将HTML页面发送到浏览器之前，此步骤在服务器端执行。在此步骤中，将不考虑Javascript代码。

因此，在render命令之后的第一步，将拾取并渲染twirl模板，并评估每个Twirl / Scala指令。这将生成一个不再包含Scala代码的HTML文件。

此生成的页面被发送到浏览器。然后将该页面加载到浏览器中，并将Java代码与使用JS的任何其他HTML页面一样进行评估。

这将解释为什么您无法按照您的方式呈现页面。

如果您的页面是静态的，一种正确的方法是仅使用twirl指令遍历数组Twirl Template - Iterating

如果getNationalities()方法返回Scala列表，您应该可以像下面那样重写列表生成

<ul>
@for(nationality <- currentUser.getNationalities()) {
   <li>@nationality</li>
}
</ul>

尝试在JavaScript中的Java变量上使用.get方法

1 个答案: