想象一个简单的播放动作,定义为
def reactTest = Action { request => Ok(views.html.hello("JOHN")) }
而hello.scala.html这个样子的,使用基本React.js例如:
hello.scala.html
@(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>外观如下:
@name
<div>
<div id="example"></div> <script type="text/jsx" src="@routes.Assets.at("javascripts/hello.js"></script>
有没有办法将@name参数传递给脚本hello.js?
hello.js
您可以将所需的任何内容保存在全局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上呈现效果更好。