app.jsからejsファイルへの変数のスクリプトタグへの受け渡し

app.jsで定義されている変数を、内部のスクリプトタグとejsファイルに渡そうとしています。このような短いルックスでのでapp.js：app.jsからejsファイルへの変数のスクリプトタグへの受け渡し

//app.js 
var express = require("express") 
var app = express() 
var request = require("request") 



var thelist =[] 
app.locals.myVar = thelist.length; 

app.get("/", function(req, res){ 
    res.render("search") 
}) 

app.get("/show/:id", function (req, res) { 
    var id = req.params.id; 
    thelist.push(id) 
    console.log(thelist); 
    res.redirect('/') 
});

私が渡したい変数app.locals.myVar、acutallyこの方法doesntの仕事とされ、私はまだそのmyVarにはEJSファイルで定義されていません取得

EJSファイルはここにある：

//search.ejs 
<html> 
    <head> 
     <title>MYMDB</title> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css"> 
     <link rel="stylesheet" type="text/css" href="/stylesheets/app.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script> 

    </head> 
    <body> 


    <a id="show-data" href="/data" class="ui right floated disabled button"> 
     See the table 
    </a> 



    <script> 
    $('#run').click(function() { 
     $('#show-data').removeClass('ui disabled button'); 
     $('#show-data').addClass('ui loading button'); 
     setTimeout(function() {  
      $('#show-data').removeClass("ui loading button"); 
      $('#show-data').addClass('ui basic button') 
       }, myVar*2000); 
    }); 
    </script> 

    </body> 
</html>

あなたはサーバー側のJSに得られ、その後、クライアント側のJSでそれを使用しているmyVar-変数を使用しようとイムを見ることができるように。しかし、ejsファイルでは認識されないようです。

出典

2017-11-06 Alex T

'res.render（）'がパラメータ化されています。それで、 'res.render（" search "、{some：" var "}）;' – zero298

res.render()がパラメータ化される。だから、試してみてください。app.render()とres.render()：用

res.render("search", { 
    some: "var" 
});

参照Expressのドキュメントを。

あなたのHTMLは、<%= myVar %>を含むこのようなものです。あなたは次のようにあなたのテンプレートが必要なすべてのデータを持つデータ/オブジェクト構造でのテンプレートのパスをレンダリングするときにこれを行うための一般的な方法がある

<html> 
<body> 
    <h1>Hello</h1> 
    <p>Lorem</p> 
    <script> 
     // Print out the variable I got 
     console.log(<%= myVar %>) 
     // or 
     console.log("<%= myVar %>") 
    </script> 
</body> 
</html>

出典

2017-11-06 20:32:22 zero298

を試してみてください。app.localeのようにmyvarを保持するか、app.jsでグローバルに定義しますか？ –

私は依存性注入を推奨していますので、 'res.render（）'に渡すオブジェクトを通して明示的に設定します。 – zero298

こんな感じですか？ 'res.render（" search "、{ some：thelist.length }）;' –

：

// 
// Pass all your objects, globals as references in your server side 
// code/endpoint, below i have also passed a library moment js so i 
// can use that server side in my template for dates 
// 
var data = {name: "Hello World", age:32, local: app.local, moment:moment}

その後、あなたのテンプレートをレンダリングあなたのテンプレートでは、データ構造

res.render("template", data);

に渡す

<h1><%=name=></h1> 
<h2><%=age%> 
<script> 
    var scope = <%=data.local%> 
</script>

さらに、それを要素属性として渡すこともできます（文字列として渡され、JSON.parseを使用してデコードされるので安全です）。

<body id="body" data-server-scope="<%=data.local%>"> 

<Script>var scope = JSON.parse(document.getElementById("body").attr("data-server-scope"));</script>

ソリューションはdata.local渡さIHAVE、あなたがこのdata.clientを呼び出すことができますかあなただけのすべてのデータ構造を下に渡すことができ、あなたのjsクライアントまでのサーバーデータ（スコープ）を渡すが、私の中にしますか私はテンプレート内でしか使用できない瞬間のリファレンスを持っています。それは魔法のようにクライアントに伝わることはありません。

出典

2017-11-06 20:40:11 MartinWebb

app.jsからejsファイルへの変数のスクリプトタグへの受け渡し

答えて

関連する問題