试图在javascript中对java变量使用.get方法

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”变量无法识别，因为它是html中的javascript变量。此代码的每个其他部分似乎按预期工作，并且.get在“i”替换为整数（例如0或1）时有效。

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

Answer 1

问题是你正在弄乱页面生成的不同步骤。

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

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

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

生成的页面将发送到浏览器。然后将页面加载到浏览器中，并将Javascript代码评估为具有JS的任何其他HTML页面。

---

这可以解释为什么您无法按照自己的方式呈现页面。

一个正确的方法，如果你的页面是静态的，只使用旋转指令迭代数组Twirl Template - Iterating

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

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