如何在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”来获取这个值，但如果你尝试访问“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模板进行渲染。