02月23, 2017

EJS在script标签中混合JavaScript代码的问题

背景

我在node+express项目中定义了一个全局变量CONFIG

global.CONFIG = {
  userName: ‘beace',
  userID: '98SDAF99QRWEQ9'
}

render的时候传入ejs页面中,

module.exports = function(app) {
  app.all('*', function(req, res) {
    console.log(CONFIG)
    res.render('index', {
      title: “xxx",
      CONFIG: CONFIG
    })
  })
}

传入完成后,在ejs中想要保留在js代码中,结果发现,每次浏览器都报这个错误

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
    <link rel="stylesheet" href="/static/dist/stylesheets/main.min.css">
    <script>
       window.CONFIG = <%-CONFIG%>
    </script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="/static/dist/javascripts/main.min.js"></script>
  </body>
</html>

解决方案

最终,在http://stackoverflow.com/questions/11289793/accessing-ejs-variable-in-javascript-logic中找到了答案。

如果是单个值,可以这样直接赋值,如果是object类型的变量,需要JSON.stringify(CONFIG)来进行一道处理。

var a = {name: "beace", id: "23423"}
JSON.stringify(a)
"{"name":"beace","id":"23423"}"

具体原因如此:

EJS需要解析HTMLCSSJavaScript,因此应该避免在<%%>中出现原生的tag

本文链接:https://beacelee.com/post/ejs-script-tag-object-not-working.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。