小编典典

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


阅读 331

收藏
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