javascript - 如何在javascript中将双大括号与变量连接起来

Question

我似乎无法弄清楚这一点。我有一个 Python/Django 模板，它使用 {{ variable }} 呈现我的变量，我正在尝试在 HTML 页面上使用 Javascript 在用户单击按钮时操作变量。

我看到的问题是 Javascript 似乎以不同的方式对待 {{，因此当它呈现为 HTML 时，它不会转换变量(即它显示“+ id +”而不是代码中的 5下面:

function changeDate()
  id = 5;
  html = "{{ variable[" + id + "] }}";
  document.getElementById('test').innerHTML = html;

我试过像这样转义它们:“{{”，这似乎可行(即，它将“id”转换为 5)，但 Python 不会将字符串解释为变量，它只显示字符串在页面上显示为 {{ variable[5] }} 而不是该变量的实际值。

我的猜测发生这种情况是因为 Javascript 页面已经呈现后将 DIV 转换为新文本，因此 Python 永远没有机会转换变量当它第一次呈现页面时。

所以我认为有两种可能的解决方案:

1. 找出一种在字符串中保留 {{ 和 }} 的同时正确呈现变量的方法

或

1. 弄清楚如何让 Python 在通过 Javascript 显示之前解释 {{ variable[5] }} 的字符串版本。

感谢任何帮助!

Answer 1

Django 的模板渲染只是做一种搜索/替换的替换:它获取大括号内的字符串 - 并使用该字符串作为将字典传递给它的键。

它不会尝试将字典值作为数据结构进行访问 - 相反，它只会采用字符串表示形式。

所以，

data = {"variable": ["a", "b", "c"] }

可以在名为“variable”的 dtemplate 中检索 - 但如果您尝试访问“variable[0]”，呈现模板应该引发 NameError - 仅仅是因为“variable[0]”不是上面的数据字典。

处理它的一种方法是在客户端将索引部分推迟到 javascript 代码，并在数据字典中传递对象的 javascript 编码 (json) 字符串 - 所以您可以做一些事情:

import json

function changeDate()
  id = 5
  variable = ["bla", "ble", "bli", "blo", "blu", "blew"]
  html = """<script> id = {{id}};
            document.write({{variable}}[id]);
            </script>
          """
  data = {"variable": json.dumps(variable), "id": id};

并传递此数据以使用 html 模板呈现。