javascript - 为什么我不能在 Django 网站的 Javascript 中使用 Jinja？

Question

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

不要像这样硬编码导入:

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

我们可以这样做:

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

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

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

例如:

homepage.html

<script src='whatever.js'></script>
<p>Another example</p>
<button id="clickme"> click me </button>

whatever.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> block 。

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

Answer 1

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

In this case, it automatically searches for a folder named static and goes inside to look for the needed code.

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

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

<小时/>

回到最初的问题，即为什么不能在 JS 文件中使用 Jinja2 或 Django 模板语法。好吧，你可以。但是您必须从 View 中渲染 JS 文件。

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

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>