django：如何将模板变量传递给javascript onclick例程？

这个概念来自于此

我在django模板中启用了2个块，左侧块显示设备信息（设备名称和位置信息），右侧块显示设备映射位置。当用户可以单击左侧面板时，右侧映射将通过将django模板变量传递给Javascript例程而改变。init\u map似乎不接受传递的变量

当用户单击左边的列时，右边的映射将根据latlon进行切换，latlon由onclick例程传递

模板页面如下：

{% 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 %}

{%block content%}
{设备%中设备的%s}
{{device.name}
{{device.coordinates}}
{{device.coordinates}}
{{device.coordinates}}
{%带lat_lon=device.coordinates%}
新的是{lat_lon}}
{%endwith%}
{%endfor%}
{%endblock内容%}
{%block extra_js%}
var lat_lon={{device.coordinates}；
函数初始映射（lat，lon）{
var imageLayer=新的AMap.imageLayer({
网址：'http://developer.amap.com/wp-content/uploads/2014/06/dongwuyuan.jpg',
边界：新的AMap.bounds（
新阿玛普州政府（116.327911,39.939229），
新阿玛普州政府（116.342659,39.946275）），
缩放：[15,18]
});
var map=new AMap.map（'map'{
resizeEnable:true，
滚轮：对，
双击缩放：真，
图层：[
新的AMap.TileLayer（），
图像层
],
视图：新建AMap.View2D({
//中心：新阿玛普州（116.342659,39.946275），
中心：新AMap.LngLat（lat，lon），
缩放：15
})
});  
}
//初始映射（0）；
{%endblock%}

---

如果启用“中心：新AMap.LngLat（116.342659，39.946275）”，地图将显示，而启用“中心：新AMap.LngLat（lat，lon）”，则不会显示地图。

如果要传递坐标，很可能有一个由纬度和经度组成的元组。在传递给Javascript函数时，必须将它们分开

你可以试试这个：

<div onclick=init_map({{ variables.0 }}, {{ variables.1 }})> 

---

我建议完全避免使用html

onclick（）

。您可以将模板变量

{{variables}}

传递给外部脚本中的javascript函数，然后添加事件侦听器（

单击

）以在单击左列时执行函数。这允许您在脚本中的任何位置使用

{{variables}

，它只需要HTML中的一个定义，而无需在每次需要时将其作为

onclick（）

参数传递（如果这适用于您的情况）。即使情况并非如此，尽可能将页面逻辑（javascript）与其结构（html）分离仍然是一种更好的做法

例如，要在外部脚本中使用模板变量，需要在django模板中的脚本标记之间声明变量，如下所示：

<script>
   var myVariables = {{ variables }};
</script>

在该脚本中，您可以添加如下所示的单击事件处理程序：

document.getElementById("leftBlockDivId").addEventListener("click", function() {
    init_map(myVariables);  // see how we can use myVariables here since it's already been declared
}, false);

如果使用

jQuery

可以执行以下操作，则编写上述事件处理程序会更简单：

$('#leftBlockDivID').click(function(){
    init_map(myVariables);
});

---

您还可以将变量传递到

数据-

属性：

<div data-variables="{{ variables }}">

甚至：

<div data-latitude="{{ variables.0 }}" data-longitude="{{ variables.1 }}">

并映射纯javascript侦听器以单击该html元素，您将在其中检索这些数据属性。它允许您避免使用

onclick=

并将其直接传递给外部脚本，或创建

元素来检索该数据。

这很有效

<div onclick="myFunction('{{ myVar }}')">

唯一的问题是你的myVar将变成一个字符串

所以如果你需要它作为一个对象，一个数组。。。这不是您需要的。

我的解决方案：

创建按钮传递以下属性

<button type="button" onclick="check(varsize = '{{ size.sizeDes}}' ); return false type="btsize">`

---

当您尝试添加字符串时，请小心用引号或双引号将标记括起来，如果您不这样做，请认为它是一个变量名，并且已经定义好了

  <a onclick="console.log('{{ class_name.string_field }}')"

变量的内容是什么？使用浏览器查看HTML源代码时会看到什么？{{device.coordinates}，其中包括设备的“纬度”和“经度”。当我删除onclick例程时，右列的可能重复项不显示。@Rubinlulu我假设您在脚本中添加了事件侦听器，并包含左列div的实际id名称？您是否查看过浏览器控制台以查看是否有任何错误？另外，请尝试
var myVariables=“{{variables}}”
。注意
{{variables}}
周围的引号。我在javascript中添加了两行代码，如下所示，然后接受lat和lon，非常感谢您的帮助！函数init_-map（lat，lon）{var-lat_-float=parseFloat（lat）；var-lon_-float=parseFloat（lon）；
{% block javascript %}
<script>
function check(varsize) {
    document.getElementById("sizeid").value = varsize;
}
</script>
{% endblock %}

  <a onclick="console.log('{{ class_name.string_field }}')"