将 jquery 与 ejs 模板一起使用答案

【问题标题】：Use jquery with ejs template将 jquery 与 ejs 模板一起使用
【发布时间】：2017-09-02 05:59:23
【问题描述】：

我正在尝试在 ejs 模板中使用 jquery 来使用服务器发送到模板的数组来自动完成输入。我收到以下错误：

ReferenceError: /var/www/html/DM/views/formulaire.ejs:8
    6| <title>Formulaire </title>
    7| </head>
 >> 8| <%
    9| $( "#depart" ).autocomplete({
    10|   source: autoComp
    11| });

$ is not defined

我做了一些研究，发现您不能将客户端 javascript (jquery) 与服务器端 javascript (ejs) 一起使用，但我没有找到任何解决方案。

代码如下：

<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta charset="UTF-8">
<title>Formulaire </title>
</head>
<body>
<script>
$( "#depart" ).autocomplete({
  source: autoComp
});
</script>

  <form action="/result" method="post">
    Départ:<input type="text" name="depart" id="depart"><br>
    Arrivée: <input type="text" name="arrivee"><br>
    <input type="submit" value="Chercher un itinéraire">
  </form>
  <%
  if(erreur){
    %> <p>Erreur lors de la saisie des stations</p>
    <%
  }
  %>
</body>
</html>

感谢您的帮助

编辑：不再出现错误，但自动完成不起作用。

【问题讨论】：

标签： javascript jquery ejs

【解决方案1】：

您需要将客户端代码放在<script> 标记中

改变

<%
$( "#depart" ).autocomplete({
  source: autoComp
});
%>

到

<script>
    $( "#depart" ).autocomplete({
      source: autoComp
    });
</script>

并将其放入头部或身体内

【讨论】：

感谢您的回答。我试过了，我没有错误了，但自动完成不起作用。在脚本标签中，我是否有权访问服务器发送的 autoComp 变量？当我尝试在中打印变量时，它可以工作，因此它似乎已发送，但在
您是否包含自动完成插件文件？上面没有显示

【解决方案2】：

我假设您正在操作中创建数组并将其传递给视图。然后，您必须更进一步，将其从服务器端视图引擎传递到实际的浏览器引擎。

<script>
  let autoComp = JSON.parse( `<%= JSON.stringify( autoComp ) %>` );

这是做什么的：

告诉 EJS 引擎将数组呈现为 JSON 字符串
（注意反引号，你需要某种引号，因为它是一个字符串）
浏览器端 JS 引擎然后通过 JSON.parse 运行该字符串

显然这种能力只能单向工作；要从浏览器获取变量到 EJS，您需要提交一个操作 (POST/GET)。

您可能还需要一些替换来使字符串更好听，例如：

function fixForJSON(val) {
  return val.replace(/'/g, '&apos;').replace(/\\/g, '\\\\');
}
function fixForDisplay(val) {
  return val.replace(/&apos;/g, "'").replace(/\\\\/g, '\\');
}

如果你真的想这样做：

<%
  $(selector).doStuff();

您需要将 JQuery 对象本身传递到模板变量中。

例如在您的节点代码中：

const jsdom = require('jsdom');
const jquery = require('jquery');
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
const $ = jquery(dom.window);
global.jq = $;

然后在你的具体路由动作中（还是节点代码）

var locals = { // the var you are sending to the EJS template
  jq: global.jq,

最后在你的 EJS 中你可以：

const $ = jq;
var testDiv = $('<div>').html('hello jquery in the template').appendTo('body');
console.log($('body').html());

【讨论】：