从外部JavaScript正确访问Django静态文件 [英] Correctly accessing django static files from external javascript

问题描述

我有一个使用AngularJS的django应用程序以及一堆JavaScript和模板文件.

I've got a django application using AngularJS with a bunch of JavaScript and template files.

在我的django模板中，我可以使用 {％static％} 标记正确引用这些文件，如下所示:

In my django template I can use the {% static %} tag to properly reference those files like so:

<script src="{% static "angular/myapp.app.js" %}"></script>

但是，外部文件本身显然无法通过django的模板框架进行解析，所以这不是一个选择.所以人们最常做的就是硬编码那里的静态路径:

However, the external files themselves obviously do not get resolved through django's templating framework and so that's not an option. So what people most often do is just hard code the static path there:

$routeProvider.when('/', {
   // this works but is not ideal
   templateUrl: '/static/pages/some-angular-template.html',  
})

我已经看到了将 STATIC_URL 加载到javascript并使用它来构造引用的建议.像这样:

I have seen recommendations of loading STATIC_URL into javascript somewhere and using that to construct references. Something like this:

Django模板:

var STATIC_URL = {{ STATIC_URL }};
function getStaticUrl(templatePath) {
  return STATIC_URL + templatePath;
}

外部JS :

$routeProvider.when('/', {
   templateUrl: getStaticUrl('/pages/some-angular-template.html'),
})

这更好一些，但仍然不完美，因为它仅处理基本路径.如果您想使用 ManifestStaticFilesStorage (我这样做)，那么您仍然无法获得文件的正确分辨率.

This is a bit better, but still not perfect because it only handles the base path. If you want to use something like ManifestStaticFilesStorage (which I do) then you still don't get the proper resolution of the file.

这个问题有什么好的解决方法吗?我正在考虑的选项:

Is there any good solution to this problem? Options I am considering:

• 将所有必要的URL引导到Django模板内的JS变量中
• 使用 data 标签(同样通过django模板)将网址存储在某些隐藏的HTML标记中
• 创建一个API以获取URL(这似乎很傻，并且在性能方面似乎很糟糕).

• Bootstrapping all necessary URLs into JS variables inside the django template
• Storing the urls in some hidden HTML markup using data tags (again via the django template)
• Creating an API to get the URLs (this seems bonkers and like it would be terrible performance-wise).

只是想知道是否存在解决此问题的标准实践或库?我已经多次遇到此问题，却从未找到令人满意的解决方案.

Just wondering if there's a standard practice or library that addresses this issue? I have run into this problem several times and never found a satisfactory solution.

推荐答案

我当前的解决方案(即使不是最优雅的方法也能很好地工作)只是在Django模板中创建了一个庞大的常量全局字典，然后直接在JS中引用它们

My current solution (which works fine if not the most elegant) is just creating a huge global dict of constants in the django template and then referencing them directly in JS.

Django模板:

<script type="text/javascript">
    NG_STATIC_FILES = {
       "HOME": "{% static '/pages/home.html' %}",
       "SOMETHING_ELSE": "{% static '/pages/some-angular-template.html' %}",
    };
</script>

外部JS :

$routeProvider.when('/', {
    templateUrl: NG_STATIC_FILES.SOMETHING_ELSE,
})

等

这篇关于从外部JavaScript正确访问Django静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！