为什么我不能在 django 站点的 Javascript 中使用 Jinja？

Answer 1

所以对于我们这些使用 Python 和 Django 框架开发网站的人来说，有一个叫做 jinja 的很棒的工具，它可以用作模板引擎。例如：

而不是像这样对导入进行硬编码：

<script src="assets/js/onebutton.js"></script>

我们可以完成这个：

<script src="{% static 'assets/js/onebutton.js' %}"></script>

在这种情况下，它会自动搜索名为 static 的文件夹并进入内部查找所需的代码。

但是为什么不能在 Javascript 中使用 jinja 模板。

例如：

主页.html

<script src='whatever.js'></script>

<p>Another example</p>

<button id="clickme"> click me </button>

无论如何.js

$(function()

{

$('#clickme').click(function(){

$.ajax({

                    headers : {'X-CSRFToken': getCookie('csrftoken')},

                    type: "POST",

                    url: '{% url "func" %}', //<--Problem arise here

                    datatype:"json",

                    data: {},

                    success: function(data){

                        var new_template = '<h1> %firstmsg% </h1>';

                        var new_frontend = new_template.replace('%firstmsg%',data.message);

                        console.log(new_frontend);

                        document.getElementById('wor').innerHTML+=new_frontend;

                    }

                });

}

}

Django 会将 AJAX 请求中的 url 识别/'{% url "func" %}'为/func

解决这个问题的唯一方法是将整个代码从移动whatever.js到homepage.html在一个<script></script>块中。

也许我们需要导入一些东西才能让 Jinja 模板工作？

Answer 2

<script src="{% static 'assets/js/onebutton.js' %}"></script>

在这种情况下，它会自动搜索名为 static 的文件夹并进入内部查找所需的代码。

这是不准确的。它所做的只是将给定的路径转换为您的设置文件中提供的静态路径，如下所示 - /static/asssets/js/onebutton.js. 这就对了。Django 或 Jinja2 不会通过文件夹查找文件。它甚至不在乎文件是否存在。

稍后，浏览器在收到 html 文档时会自动从服务器获取此文件。

回到关于为什么不能在 JS 文件中使用 Jinja2 或 Django 模板语法的原始问题。嗯，你可以。但是您必须从您的视图中呈现您的 JS 文件。

现在，我确定您正在使用该render函数从视图中返回模板。但是它有什么作用呢？

该render函数将 django 特定模板标签转换为适当的 html 内容。

因此，如果您在 js 文件中使用 django 或 jinja 的模板语法，则也必须渲染 js 文件。但这似乎是个坏主意。相反，您可以在 html 文件中创建一些全局变量，并在 js 文件中使用它们。

<!-- define required variables in template -->

<script>

    var URL = '{% url ... %}';

    var OTHER_VARIABLE = '{{ other_variable }}';

</script>

<!-- include your js files -->

<script src="/path/to/file.js"></script>