[英]Passing data from Django views/template into the static javascript
这个问题已经以多种方式被问到,但是诸如在脚本标签之前定义变量之类的解决方案没有奏效。
模板.html
<script>
var locations = {{ some_variable }}
</script>
<script type="text/javascript" src="{% static 'base/scripts/maps.js' %}"></script>
我相信这是因为maps.js
实际上是一个函数。 它的开头是这样的:
地图.js
(function($){
"use strict";
function mainMap() {
var ib = new InfoBox();
// Infobox Output
function locationData(locationURL,locationImg,locationTitle, locationAddress, locationRating, locationRatingCounter) {
return('SOME_HTML_WITH_VARIABLES')
}
// Locations
var locations = [
[ locationData('listings-single-page.html','images/listing-item-01.jpg',"Tom's Restaurant",'964 School Street, New York', '3.5', '12'), 40.94401669296697, -74.16938781738281, 1, '<i class="im im-icon-Chef-Hat"></i>'],
];
我想要做的是从我的模型中传递位置数据,例如
{% for model in query_list %}
[ locationData('link_to','img_url','{{ model.name }}','{{ model.address }}', '5', '10'), {{ model.latitude }}, {{ model.longitude }}, {{ forloop.counter }}, '{{ model.icon }}'],
{% endfor %}
可能的解决方案:
将整个maps.js
文件发布到 template.html 中的脚本标签内。 但是这个文件有 10000 多行。
这不是一个精确的解决方案,但它是处理这种情况的一个技巧。
视图.py
def index(request):
monthList = ['jan', 'feb', 'mar]
activities = [1,2,3]
model = {"name" : "Fine Guy" ]
context = {
'monthList' : monthList,
'activities' : activities,
'model' : model,
}
return render(request, 'index.html', context)
索引.html
<!-- passing django values to external js -->
<!-- hided -->
<input type="text" id="monthList" style="display: none" value="{{ monthList|safe }}">
<input type="text" id="activities" style="display: none" value="{{ activities|safe }}">
<!-- for your question -->
<input type="text" id="modelname" style="display: none" value="{{ model.name|safe }}">
在这里,我只是将值列表monthList
和activities
从 django 上下文传递到呈现的 HTML 文件,并使用(style="display:none")
隐藏它
|safe
是为了从 Python 格式到 Javacript 格式的准确值
现在,您可以使用index.html中的标签 Id获取static/external.js中的值
外部.js
var monthList = document.getElementById("monthList").value;
var activities = document.getElementById("activities").value;
// for your question
var modelname = document.getElementById("modelname").value;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.