Question

在JS中使用django变量的大多数SO示例都在HTML中使用了JS。我试图将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>

js

可以看到var url

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文件移出模板？

3 个答案: