当使用模板和 django 的变量时，如何将 js 文件移出模板？

Question

大多数在JS中使用django变量的SO例子都在JS中HTML。我试图将 JS 放在一个单独的文件中，但它停止工作了。当我在模板中使用 JS

{% url "distributors:search_dist" %}

工作正常，它使我移动到 distributors/search_dist，但是当我尝试使用单独的 JS 文件时，它使我移动到 %7B%%20url%20%22distributors:search_dist%22%20%%7D。

有什么方法可以解决此问题？

Answer 1

js 将无法计算 {% url "distributors:search_dist" %}。它的目的不是到达客户端。它旨在由 django 在服务器端进行评估。

你可以做的是将 {% url "distributors:search_dist" %} 放在 html 中：

<script>
   var url = {% url "distributors:search_dist" %};
</script>

var url 将被 js 可见

Answer 2

您可以在模板中设置全局 JS 变量。

<script>
    var URL = {% url "distributors:search_dist" %};
</script>

现在在你的全局变量之后加载你的 JS 文件。

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

Answer 3

我通常会在我的基本模板中设置一个应用程序范围的对象，如果需要，您可以在其他模板中对其进行扩展：

# base.html (upper-most HTML template)

. . .
    <script>
        var myApp = {
                staticUrl: '{{ STATIC_URL }}',
                distributorsSearchDistUrl: '{% url "distributors:search_dist" %}'
            }
    </script>
</body>

然后您可以在其他模板中访问它们，前提是它们扩展 base.html 或包含在扩展 base.html 的模板中。从那里您可以访问 JavaScript 中可能包含的变量：

# some_page.html

{% extends 'base.html' %}

{% block js %}
    <script src="extra.js"></script>
{% endblock %}


# extra.js

'use strict';

console.log(myApp.staticUrl);

您始终可以使用可能特定于视图的附加值在模板中扩展此对象：

# another-template.html

{% extends 'base.html' %}

{% block js %}
    {{ block.super }}

    <script>
        myApp['someValue'] = '{{ variableFromTheView }}';
    </script>

    <script src="extra.js"></script>
{% endblock js %}

当使用模板和 django 的变量时，如何将 js 文件移出模板？

How to move js file out of a template when it uses template's and django's variables?

django

django-templates