PlayFramework HTML，将变量转换成Javascript吗？

小编典典

PlayFramework HTML，将变量转换成Javascript吗？

reactjs

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

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？

阅读 330

2020-07-22

共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上呈现效果更好。

2020-07-22