PlayFramework HTML，变量变成 Javascript？

Question

想象一个简单的播放动作定义为

def reactTest = Action {
    request => Ok(views.html.hello("JOHN"))
}

和 hello.scala.html 看起来像这样，使用基本的 React.js 示例：

@(name: String)

....

<div id="example"></div>
<script type="text/jsx">
  React.render(
  <h1>Hello, @name!</h1>,     <---- NAME PARAMETER USED HERE
  document.getElementById('example')
);
</script>

这工作正常，结果将是一个 'Hello, JOHN!' 页面。现在，我知道 Scala 代码在服务器上执行，JS 代码在客户端执行，但我想知道是否有办法将 @name 参数传递给相同的 javascript (jsx ) 代码，如果此类代码位于单独的 .js 文件中，则 <div> 将如下所示：

<div id="example"></div>
<script type="text/jsx" src="@routes.Assets.at("javascripts/hello.js"></script>

是否可以将 @name 参数传递给 hello.js 中的脚本？

Answer 1

您可以将任何您想要的内容保存在全局 JS 变量中，然后在需要时访问它。

例如，假设您想在脚本中使用用户对象。有了这个 html 模板

@(user: User)

<html>
<body>
    <script>
        var MyUserObject = {};
        MyUserObject["name"] = "@user.name";
        MyUserObject["age"] = @user.age;
    </script>
    <!-- ... -->
    <script src="your_component.js"></script>
</body>

然后在你包含的 js 中你可以做这样的事情：

(function(user) {
    alert("Hello " + user.name + ". You are " + user.age + " years old");    
})(MyUserObject);

然后您可以使用您要使用的值的映射来改进它，或者将您的对象呈现为 JSON 并在 JS 端解析它：

def reactTest = Action {
    request => Ok(views.html.hello(Json.toJson(user)))
}

// and then

@(user: String)

<html>
<body>
    <script>
        var MyUserObject = JSON.parse("@user");
    </script>
    <!-- ... -->
    <script src="your_component.js"></script>
</body>

不完美，但比在 JS 文件 IMO 上渲染更好。

Answer 2

中的@routes...：

<script type="text/jsx" src="@routes.Assets.at("javascripts/hello.js"></script>

可改为：

@routes.YourController.withModel("javascripts/hello.js", model)

然后在 YourController.withModel 中，您可以使用模型预处理 hello.js（例如使用模板 sbt-web 插件）。

您也可以在传入此 Scala HTML 模板之前使用模型预处理 JS。

如果 CPU/memory 是一个主要问题，这可以变得更高级：例如，在预先确定的模型和预处理的静态 JS 文件之间映射，并改为引用它们。或者使用其他 caching/CDN 技巧。

因此，除了此处给出的其他答案之外，这些只是一些想法。享受吧。

PlayFramework HTML，变量变成 Javascript？

PlayFramework HTML, variable into Javascript?

javascript

scala

playframework

reactjs