PlayFramework HTML，变量转换成 Javascript？

IT技术 javascript scala playframework reactjs
2021-05-08 19:04:55

想象一个简单的 Play Action 定义为

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>

这工作正常，结果将是“你好，约翰！” 页。现在，我知道 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？

2个回答

您可以在全局 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 上渲染要好。

该@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插件）。

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

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

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

其它你可能感兴趣的问题
上一篇Ender 3 挤压无法正常工作 下一篇沿 Y 轴解决 3 个床位问题