为 javascript 占位符转义 jinja 模板

Question

我想将 javascript 变量 ${channels[i]} 传递到我的 jinja2 模板作为 link 标签的 href 属性的占位符。

我已尝试 {% raw %}{% endraw %} tags 转义 " html 实体，但似乎 jinja2 抛出异常 %是一个身份不明的角色。

看看下面我的代码：

for(i=0; i<=channels.length-1; i++) {
  console.log(channels[i])
  const li = document.createElement("li");

  li.innerHTML = `<a href="{{ url_for('channel', channel_name = ${channels[i]}) }}" >${channels[i]}</a>`;

  ul.append(li);
}

任何帮助或任何其他方法来完成任务将不胜感激

Answer 1

你在混合东西，你不能计算 jinja2 表达式 {{ .. }} 中的 javascript 个变量。

jinja2 在 服务器端 呈现您的模板，HTML 输出提供给 客户端（浏览器），而 javascipt（您的代码）在 客户端 （浏览器）上操作接收到的 HTML 的 DOM。那么他们将如何互相交谈呢？你有 3 个选项：

使用 ajax 执行 http 请求（不是你的情况）
审查代码并将逻辑移至 jinja2（强烈推荐）
或尝试这个技巧：

[..]

  let href = "{{ url_for('channel', channel_name='CHANNEL_NAME'} }}".replace("CHANNEL_NAME", ${channels[i])
  li.innerHTML = "<a href=" + href + ">${channels[i]}</a>";

[..]

请记住，jinja2 将呈现您的模板并提供以下输出：

for(i=0; i<= channels.length-1; i++) {
  console.log(channels[i])
  const li = document.createElement("li");
  
  let href = "http://localhost:5000/channel/CHANNEL_NAME".replace("CHANNEL_NAME", ${channels[i])
  li.innerHTML = "<a href=" + href + ">${channels[i]}</a>";
  
  ul.append(li);
};

一旦客户端收到，就可以执行javascript代码，然后用${channels[i]}

的值处理CHANNEL_NAME令牌的替换

为 javascript 占位符转义 jinja 模板

Escaping jinja template for javascript place holder

javascript

templates

web-applications

jinja2