Question

我需要将一个文件加载到一个函数中，以便与电话autoformatter库（Intl tel input）一起使用当我在独立的html页面中尝试这个时，它运行正常，但是当我尝试在django项目中执行此操作时，该文件只是没有加载而我认为它是因为它＆＃ 39;没有找到它在路上的位置。

main.js和utils.js都在我项目的静态目录中，所以我不确定为什么它找不到utils.js文件。

main.js：

$(document).ready(function() {
    $("#phoneNumber").intlTelInput({
        utilsScript: "utils.js"
    });
});

Answer 1

在我需要在JavaScript中引用服务器端路径的情况下，我在最上面的模板中设置了一个“app”对象，我可以在之后加载的JavaScript文件中引用，通常使用require.js。

示例：

# base.html (upper-most template)
<!DOCTYPE html>{% load static from staticfiles %}
    <html>
        <head>. . .</head>
        <body>
            . . .
            <script>
                var myApp = {
                    staticUrl: '{{ STATIC_URL }}'
                }
            </script>
            <script src="{% static 'js/some-file.js' %}"></script>
        </body>
    </html>

# some-file.js

'use strict';

$(document).ready(function(){
    console.log(myApp.staticUrl);
});

Answer 2

查看您的URL调度程序（urls.py），了解可能请求静态文件的实际路径。

例如，在我的一个项目中，JavaScript文件位于/static/js/。

例如，如果您的配置也是如此，那么您可以这样做 -

$(document).ready(function() {
    $("#phoneNumber").intlTelInput({
        utilsScript: "/static/js/utils.js"
    });
});

如果您想对URL进行硬编码，那就是这样。您可以在模板中或在模板引擎未处理的.js文件中执行此操作。

但是，如果您在模板中，我建议使用staticfiles app，特别是static模板标记，该标记用作构建文件路径的帮助程序。

在django javascript文件中引用其他静态文件

2 个答案: