Question

我正在尝试将app.js中定义的变量传递到内部的脚本标记和ejs文件中。所以app.js简而言之就是这样：

//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，实际上这个方法不起作用，我仍然得到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>

正如你所看到我试图使用myVar-在服务器端js获得的变量然后在客户端js中使用它。但它似乎在ejs文件中无法识别。

Answer 1

res.render()已参数化。所以，试试：

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

请参阅Express文档：app.render()和res.render()。

您的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>

Answer 2

所以这样做的一般方法是在数据/对象结构中渲染模板时，模板需要的所有数据如下：

//
// 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>

任何一个解决方案都会将服务器数据（范围）传递给你的js客户端，我已经传递了data.local，你可以调用这个data.client，或者你可以传递所有的数据结构，但在我的例子中，我有一个引用只能在模板中使用的时刻，它不能神奇地传递给客户端，以防你想知道。

将变量从app.js传递到ejs文件到脚本标记

2 个答案: