如何在 Django 模板过滤器中注入 JavaScript 变量答案

【问题标题】：How to inject JavaScript variable in a Django template filter如何在 Django 模板过滤器中注入 JavaScript 变量
【发布时间】：2019-09-28 06:50:56
【问题描述】：

我有一个 Django 模板过滤器来根据传递的键检索字典项。

{% with data=dict_data|get_data:key %}

我已经单独制作了一个返回这些项目的 template_tag.py 文件。

def get_domain_data(dictionary, key):
   p = ast.literal_eval(dictionary)
   return p[key]
# data being returned successfully

问题在于在过滤函数中传递键的动态值。

   <script>
     var key_val = $('#input_id').val();
     '{% with data=dict_data|get_domain_data:"'+key_val+'" %}';  //encountering error here
            // rest of the code
     '{% endwith %}';
    </script>

如果我硬编码一个字符串值，整个操作就可以工作，但我无法在 Django {% filter %} 函数中使用 JavaScript 变量。

【问题讨论】：

模板代码在javascript之前运行。这是不可避免的，因为页面是从服务器上的模板呈现然后发送到客户端的。一旦页面在客户端上准备好，客户端就会运行 javascript。所以你不能像那样使用 javascript 与模板交互。
您需要创建一个 js 回调来联系网站并使用 xhr 或其他系统获取所需的数据。

标签： javascript django django-template-filters

【解决方案1】：

Get javascript variable's value in Django url template tag也有类似的问题

提供arg1 可以是数字并且反向的url不包含字符串/12345/的其他实例那么你可以使用，

var url_mask = "{% url 'someview' arg1=12345 %}".replace(/12345/, tmp.toString());

【讨论】：

【解决方案2】：

正如 Matt Ellen 在评论中提到的，模板代码在服务器上执行，然后生成的结果被发送到解释 javascript 部分的浏览器 - 所以这不能这样工作。

如果您的数据字典足够小并且不依赖于 javascipt 用户交互（即 javascript 仅读取它），那么解决方案是将其序列化为 json（在视图本身中或使用模板过滤器 - 可能已经存在 FWIW），将它绑定到一个 javascript 变量（在模板中），然后让 javascript 代码将它用作任何 js 对象，即（假设一个“jsonify”模板过滤器）：

 <script>
     var data_dict = {% data_dict|jsonify %};

     function do_something() { 
         var key_val = $('#input_id').val();
         var data = data_dict[key_val];
            // rest of the code
     }
     // and you'll probably want to bind do_something to
     // some js event handler
 </script>

【讨论】：