2015-06-07 4 views
9

eine einfache Wiedergabe Aktion Stellen Sie sich vor, wiePlayFramework HTML, variabel in Javascript? definiert

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

und die hello.scala.html wie folgt aussieht, mit einem Grund React.js Beispiel mit:

@(name: String) 

.... 

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

Dies funktioniert gut, und das Ergebnis wird ein ‚Hallo sein, JOHN!' Seite. Jetzt weiß ich, dass der Scala-Code auf dem Server und der JS-Code auf dem Client ausgeführt wird, aber ich frage mich, ob es eine Möglichkeit geben würde, den @name Parameter an den gleichen Javascript (JSX) Code zu übergeben, wenn dieser Code in einem war separaten JS-Datei und die <div> würde wie folgt aussehen:

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

würde die @name Parameter an das Skript übergeben in hello.js es einen Weg geben?

+0

Das ist eine gute Frage, danke. :) – bjfletcher

Antwort

6

Sie können speichern, was Sie wollen, in einer globalen JS-Variable und dann darauf zugreifen, wann immer Sie brauchen.

Angenommen, Sie möchten ein Benutzerobjekt in Ihrem Skript verwenden. Mit diesen HTML-Vorlage

@(user: User) 

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

dann in Ihrem enthalten js Sie so etwas tun könnte:

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

Sie können diese Karte von den Werten dann verbessern indem Sie oder vielleicht machen Sie Ihr Objekt verwenden möchten als JSON und es auf JS Seite Parsen:

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> 

Nicht perfekt, aber besser als IMO, dass auf den JS-Dateien zu machen.

0

Die @routes... in:

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

Dann mit dem Modell in YourController.withModel Sie können Vorprozess hello.js (wie mit einem Templat sbt-web Plugin):

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

kann geändert werden.

Sie können die JS alternativ mit dem Modell vorverarbeiten, bevor Sie in diese Scala HTML-Vorlage übergehen.

Wenn CPU/Speicher ein Hauptproblem ist, kann dies fortgeschritten werden: z. B. Mapping zwischen vorgegebenen Modellen und vorverarbeiteten statischen JS Dateien, und stattdessen referenzieren. Oder verwenden Sie andere Caching/CDN-Techniken.

Also, das sind nur Ideen, zusätzlich zu den anderen Antworten hier gegeben. Genießen.