django：如何将模板变量传递给 javascript onclick 例程？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28516101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
django: how to pass template variable to javascript onclick routine?
提问by rubinlululu
The concept comes from this http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic
这个概念来自这个http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic
I enable 2 blocks in a django template, left blockshows device info (device name and location info),right block shows device map location.When user can click on left panels, the right map will change by passing Django template variable to Javascript routine. It seems the passed variable is not accepted by init_map.
我在 django 模板中启用了 2 个块，左块显示设备信息（设备名称和位置信息），右块显示设备地图位置。当用户单击左侧面板时，右侧地图将通过将 Django 模板变量传递给 Javascript 例程来更改。init_map似乎不接受传递的变量。
when user click on left column, the right map will switch according to latlon, which is passed by onclick routine.
当用户点击左列时，右图会根据经纬度进行切换，经onclick 例程传递。
template page is as follows:
模板页面如下：
{% block content %}
{% for device in devices %}
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
<div class="panel panel-default" onclick="init_map( {{ device.coordinates.latitude }}, {{device.coordinates.longitude }} );return false;">
<div class="row padall">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<span></span>
<img src="{{ device.thumbnail.url }}">
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="clearfix">
<div class="pull-left">
<span class="fa fa-dollar icon">{{device.name}}</span>
</div>
<div class="pull-right">
{{device.coordinates }}
</div>
</div>
<div>
<h4><span class="fa fa-map-marker icon"></span>{{ device.coordinates }}</h4>
<span class="fa fa-lock icon pull-right">{{ device.coordinates }}</span>
{% with lat_lon=device.coordinates %}
new is {{ lat_lon }}
{% endwith %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="row padbig">
<div id="map" class="map"></div>
</div>
</div>
{% endfor %}
{% endblock content %}
{% block extra_js %}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=a23b5e94cecc8e98acd039aba6cd064c"></script>
<script type="text/javascript">
var lat_lon = {{ device.coordinates | js }};
function init_map(lat,lon) {
var imageLayer = new AMap.ImageLayer({
url:'http://developer.amap.com/wp-content/uploads/2014/06/dongwuyuan.jpg',
bounds: new AMap.Bounds(
new AMap.LngLat(116.327911, 39.939229),
new AMap.LngLat(116.342659, 39.946275)),
zooms: [15, 18]
});
var map = new AMap.Map('map',{
resizeEnable: true,
scrollWheel: true,
doubleClickZoom: true,
layers: [
new AMap.TileLayer(),
imageLayer
],
view: new AMap.View2D({
//center: new AMap.LngLat(116.342659, 39.946275),
center: new AMap.LngLat(lat,lon),
zoom:15
})
});
}
//init_map(0);
</script>
{% endblock %}
if I enabled "center: new AMap.LngLat(116.342659, 39.946275)," the map will show up, while with "center: new AMap.LngLat(lat,lon)," , no map show up.
如果我启用“center: new AMap.LngLat(116.342659, 39.946275)”，地图将显示，而“center: new AMap.LngLat(lat,lon),”，则不显示地图。
采纳答案by Selcuk
If you are passing a coordinate, most probably you have a tuple consisting of latitude and longitude. You must separate them while passing to the Javascript function.
如果您正在传递坐标，则很可能您有一个由纬度和经度组成的元组。您必须在传递给 Javascript 函数时将它们分开。
You may try this:
你可以试试这个：
<div onclick=init_map({{ variables.0 }}, {{ variables.1 }})>
回答by user1420563
This works
这有效
<div onclick="myFunction('{{ myVar }}')">
The only thing is that your myVar will become a string,
唯一的事情是你的 myVar 会变成一个字符串，
So if you need it as an object, an array... that's not what you need.
所以如果你需要它作为一个对象，一个数组......那不是你需要的。
回答by Jhanvi Patel
My solution:
我的解决方案：
- create button pass this below properties
<button type="button" onclick="check(varsize = '{{ size.sizeDes}}' ); return false type="btsize">` - write script on header part
{% block javascript %} <script> function check(varsize) { document.getElementById("sizeid").value = varsize; } </script> {% endblock %}
- 创建按钮通过下面的属性
<button type="button" onclick="check(varsize = '{{ size.sizeDes}}' ); return false type="btsize">` - 在标题部分编写脚本
{% block javascript %} <script> function check(varsize) { document.getElementById("sizeid").value = varsize; } </script> {% endblock %}
回答by aus_lacy
I would suggest avoiding the html onclick()completely. You can pass your template variable {{ variables }}to the javascript function in an external script and then add an event listener (click) to execute a function upon clicking the left column. This allows you to use {{ variables }}anywhere in the script and it only required a single definition in your HTML rather than having to pass that in as an onclick()parameter each time you may need it (if that applies to your situation). Even if that's not the case it's still a better practice to separate the page logic (javascript) from its structure (html) as much as possible.
我建议onclick()完全避免使用 html 。您可以将模板变量传递{{ variables }}给外部脚本中的 javascript 函数，然后添加事件侦听器 ( click) 以在单击左列时执行函数。这允许您{{ variables }}在脚本中的任何地方使用，并且它只需要在您的 HTML 中定义一个单一的定义，而不必在onclick()每次需要时将其作为参数传递（如果这适用于您的情况）。即使情况并非如此，尽可能将页面逻辑 (javascript) 与其结构 (html) 分开仍然是更好的做法。
For example to use a template variable in an external script you need to declare the variable in your django template between a script tag like so:
例如，要在外部脚本中使用模板变量，您需要在 django 模板中的脚本标记之间声明该变量，如下所示：
<script>
var myVariables = {{ variables }};
</script>
You can then use myVariablesin your external script if it's loaded after you declare myVariableslike so:
myVariables如果在声明后加载了外部脚本，则可以在外部脚本中使用myVariables：
<script src="myExternalScript.js"></script>
In that script you can add a click event handler that may look like:
在该脚本中，您可以添加一个单击事件处理程序，如下所示：
document.getElementById("leftBlockDivId").addEventListener("click", function() {
init_map(myVariables); // see how we can use myVariables here since it's already been declared
}, false);
The above event handler would be even simpler to write if you were to use jQuerywhere you could do something like:
如果您要使用jQuery可以执行以下操作的地方，则上面的事件处理程序编写起来会更简单：
$('#leftBlockDivID').click(function(){
init_map(myVariables);
});
回答by GwynBleidD
You can also pass your variables into data-attributes:
您还可以将变量传递给data-属性：
<div data-variables="{{ variables }}">
or even:
甚至：
<div data-latitude="{{ variables.0 }}" data-longitude="{{ variables.1 }}">
and map pure javascript listener for clicking that html element, in which you will retrieve those data attributes. It lets you avoid using onclick=and passing it to external script directly or creating an <script>element to retrieve that data.
并映射纯 javascript 侦听器以单击该 html 元素，您将在其中检索这些数据属性。它使您可以避免使用onclick=它并将其直接传递给外部脚本或创建一个<script>元素来检索该数据。
