如下面的代码所示，我已经将一个<script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script>导入到Index.html中。但是JS文件中有Django变量。如:{{ sizes }}和{{ urlsPosts }}，他们从Views.py到Index.html。
不幸的是，如果我把JS作为一个单独的文件保存，Django不会在JS文件中看到这些变量。如果我将JS复制粘贴到HTML中而不进行分离-一切都工作得很好。我如何将这些Django变量包含到单独的Js文件中?
index . html:
<html>
{% load static %}
{% include 'head.html' %}
<body>
<header>
</header>
</body>
<footer>
<script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script>
</footer>
</html>
Views.py:
def index(request):
posts = Post.objects.all()
sizes = ''
urlsPosts = ''
for i in range(0, len(posts)):
if i == len(posts):
sizes = sizes + str(posts[i].thumbnail.width) + 'x'
sizes = sizes + str(posts[i].thumbnail.height)
urlsPosts = urlsPosts + posts[i].thumbnail.url
else:
sizes = sizes + str(posts[i].thumbnail.width) + 'x'
sizes = sizes + str(posts[i].thumbnail.height) + ' '
urlsPosts = urlsPosts + posts[i].thumbnail.url + ' '
return render(request,'index.html',{'posts':posts, 'sizes':sizes, 'urlsPosts':urlsPosts)
posts_lazy_loading.js:
var images = document.getElementsByClassName('cover_main_page'),
posts = document.getElementsByClassName('post'),
descriptions = document.getElementsByClassName('description'),
description_height = descriptions[0].clientHeight;
post_content = document.getElementsByClassName('post_content'),
loading = document.getElementsByClassName('dots_portoflio'),
sizes = "{{ sizes }}",
sizeslist = sizes.split(" "),
urlsPosts = "{{ urlsPosts }}",
urlslist = urlsPosts.split(' '),
ratios = [],
viewport_width = document.documentElement.clientWidth,
newwidth = 0,
margin = 3, //each post has 3vw margin left and 3vw margin right
mobile = 0,
mobilewidth = 94;
.... a lot of code here ....
是的，django将生成如下行:
它不会打开JS，因为它会要求浏览器加载JS，要在JS中使用django，你有两个选项之一
- 使用{%include 'JSFILE'%}，但在这种情况下，你的JS文件应该在templates文件夹
- 把JS代码放到你的HTML模板中。