EJS客户端变量未定义

Question

Here is my very code which I got from the example in the EJS readme:

<div id="output"></div>
<script src="/js/ejs.min.js"></script>
<script>
  html = ejs.render('<%= people %>', {people: 'hello'});
  document.getElementById('output').innerHTML = html;
</script>

With just that basic code, I'm getting an error somehow,

ReferenceError: /Users/owner/Dropbox/answered-client/views/pages/test.ejs:4
    2| <script src="/js/ejs.min.js"></script>
    3| <script>
 >> 4|   html = ejs.render('<%= people %>', {people: 'hello'});
    5|   document.getElementById('output').innerHTML = html;
    6| </script>
    7| 

    people is not defined
        at eval (eval at compile (/Users/owner/Dropbox/answered-client/node_modules/ejs/lib/ejs.js:549:12), <anonymous>:11:26)
        at returnedFn (/Users/owner/Dropbox/answered-client/node_modules/ejs/lib/ejs.js:580:17)
        at tryHandleCache (/Users/owner/Dropbox/answered-client/node_modules/ejs/lib/ejs.js:223:34)
        at View.exports.renderFile [as engine] (/Users/owner/Dropbox/answered-client/node_modules/ejs/lib/ejs.js:437:10)
        at View.render (/Users/owner/Dropbox/answered-client/node_modules/express/lib/view.js:135:8)
        at tryRender (/Users/owner/Dropbox/answered-client/node_modules/express/lib/application.js:640:10)
        at Function.render (/Users/owner/Dropbox/answered-client/node_modules/express/lib/application.js:592:3)
        at ServerResponse.render (/Users/owner/Dropbox/answered-client/node_modules/express/lib/response.js:1008:7)
        at app.get (/Users/owner/Dropbox/answered-client/index.js:36:7)
        at Layer.handle [as handle_request] (/Users/owner/Dropbox/answered-client/node_modules/express/lib/router/layer.js:95:5)

Is there something obvious I'm missing?

Answer 1

Try to pass it under locals as follows

 <div id="output"></div> <script src="/js/ejs.min.js"></script> <script> html = ejs.render('<%= people %>', { locals: {people: 'hello'}}); // locals document.getElementById('output').innerHTML = html; </script> 

Answer 2

Pretty late here, but I just solved this problem myself. The problem is that the EJS you want rendered by the client is in a .ejs file that's first being parsed by the server, so the server is the one that's throwing the error because it isn't reading your JS to know what people is.

The quick fix to this was to put the code that's rendering the client side EJS in an external .js file and include it. But I believe you can also use ejs.delimiter property to change the tags from <% %> to something like <? ?> <? ?> , and this way, that section of code won't get parsed by the server.