46

私はNode.jsアプリに取り組んでいます（これはゲームです）。この場合、人がインデックスにアクセスして部屋を選択すると、適切な部屋にリダイレクトされるようにコードを設定しました。

現在、Expressv2.5.8では次のように実行されています。

server.get("/room/:name/:roomId, function (req, res) {
  game = ~databaseLookup~
  res.render("board", { gameState : game.gameState });
}

board.ejsで、次のようなコードを使用してgameStateマナーにアクセスできます。

<% if (gameState) { %>
  <h2>I have a game state!</h2>
<% } %>

これをJavaScriptロジックにインポートする方法はありますか？私は、次のようなことvar gs = ~import ejs gameState~ができるようになり、それを使ってやりたいことができるようになりたいと思っています。変数にアクセスし、検証のためにコンソールに出力します。最終的に、このgameStateでやりたいのは、ボードを適切に表示することです。そのためには、ピースの位置にアクセスして、画面に適切に表示するなどの操作を行う必要があります。

ありがとう！

4

9 に答える 9

54

gameState変数をページのjavascriptに直接挿入できます。

<% if (gameState) { %>
     <h2>I have a game state!</h2>
     <script>
        var clientGameState = <%= gameState %>            
     </script>
<% } %>

もう1つのオプションは、ページが既に読み込まれた後にサーバーにAJAX呼び出しを行い、gameState JSONを返し、clientGameStateをJSON応答に設定することです。

あなたもこれに興味があるかもしれません：Node.jsとブラウザの間でコードを共有するにはどうすればよいですか？

于 2012-07-02T17:27:00.363 に答える
25

私も同じ問題を抱えていました。ページをレンダリングするためだけでなく、jsスクリプトでもデータを使用する必要がありました。ページはレンダリング時に文字列にすぎないため、データを文字列に変換してから、jsで再度解析する必要があります。私の場合、私のデータはJSON配列だったので、次のようになります。

<script>
  var test = '<%- JSON.stringify(sampleJsonData) %>'; // test is now a valid js object
</script>

一重引用符は、stringifyの二重引用符と混合しないでください。また、ejs docsから：

"<％-エスケープされていない値をテンプレートに出力します"

アレイについても同じことができます。配列を連結してから、再度分割するだけです。

于 2019-12-02T10:21:52.367 に答える
10

以下のロジックの方が優れていると思います。

ejsページに渡される変数がであると仮定するとuid、タグの内容divまたはh変数が渡されるタグを持つことができます。hスクリプト内のdivまたはタグの内容にアクセスして、変数に割り当てることができます。

以下のコードサンプル:(ejsで）

<script type="text/javascript">
    $(document).ready(function() {
        var x = $("#uid").html(); 
        alert(x);  // now JS variable 'x' has the uid that's passed from the node backend.
    });
</script>

<h2 style="display:none;" id="uid"><%=uid %></h2>
于 2012-09-29T19:26:13.050 に答える
7

EJSテンプレートの場合：
例： -testing.ejs

<html>
<!-- content -->
<script>
    // stringify the data passed from router to ejs (within the EJS template only)
    var parsed_data = <%- JSON.stringify(data) %>  
</script>
</html>

サーバーサイドスクリプトの場合：
例：Router.js

res.render('/testing', {
    data: data // any data to be passed to ejs template
});

リンクされたjs（またはjquery）スクリプトファイルの場合：
ex：-script.js JavaScriptの場合：

console.log(parsed_data)

JQueryの場合：

$(document).ready(function(){
    console.log(parsed_data)
 });

注：1。user-<％％>タグの=の代わりに
2.ルーターから渡されたデータを宣言または使用して、リンクされたjavascriptまたはjqueryスクリプトファイルを直接表示することはできません。
3. EJSテンプレートでのみ<％％>を宣言し、リンクされたスクリプトファイルを使用します。

よくわかりませんが、ルーターから渡されたデータを使用してスクリプトファイルまたはスクリプトタグを表示することがベストプラクティスであることがわかりました。

于 2020-05-30T13:56:16.573 に答える
3

これは私のために働きます。

// bar chart data
    var label = '<%- JSON.stringify(bowlers) %>';
    var dataset = '<%- JSON.stringify(data) %>';

    var barData = {
      labels: JSON.parse(label),
      datasets: JSON.parse(dataset)
    }
于 2020-10-11T13:02:17.773 に答える
3

これはうまくいくはずです

  res.render("board", { gameState : game.gameState });

フロントエンドjsで

const gameState = '<%- JSON.stringify(gameState) %>'
于 2021-04-07T13:30:14.273 に答える
1

この場合、入力テキストを使用してデータを取得できます。Firebaseで使用すると、簡単にテストできます。

<input type="text" id="getID" style="display: none" value="<%=id%>">
于 2019-08-23T14:38:23.390 に答える
1

バックエンドjsを文字列にすることで、バックエンドjsをフロントエンドejsに割り当てることができます。

<script>
     var testVar = '<%= backEnd_Var%>';
</script>
于 2021-07-29T14:42:30.667 に答える
1

私はこれがずっと前に答え​​られたことを知っていますが、私は別の解決策を必要とする同様の問題に遭遇したので、私はそれに追加すると思いました。

基本的に、私は次のようなjavascriptロジックを介してJSONオブジェクトの配列であるEJS変数にアクセスしようとしていました。

<script>
   // obj is the ejs variable that contains JSON objects from the backend
   var data = '<%= obj %>';
</script>

次にデータを使用しようとするとforEach()、エラーが発生'<%= obj %>'します。これは、オブジェクトではなく文字列を提供するためです。

これを解決するには：

<script>
   var data = <%- obj %>;
</script>

文字列の折り返しを削除してに変更した後<%-（htmlがバッファに移動するのをエスケープしないように）、オブジェクトにアクセスして、を使用してループすることができましたforEach()

于 2021-11-24T17:03:26.910 に答える