logo标签列表

Django：如何将模板变量传递给JavaScript的onclick函数？

javascriptdjangovariablestemplates
8
这个概念来自于这个链接：http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic 我在Django模板中启用了两个块，左边的块显示设备信息（设备名称和位置信息），右边的块显示设备地图位置。当用户点击左侧面板时，通过将Django模板变量传递给Javascript例程来更改右侧地图。似乎传递的变量未被init_map接受。
当用户单击左列时，右侧地图将根据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 %}

如果我启用了 "center: new AMap.LngLat(116.342659, 39.946275)"，地图就会显示出来，而使用 "center: new AMap.LngLat(lat,lon)" 则没有地图显示。
你的“变量”内容是什么？使用浏览器查看HTML源代码时，你看到了什么？ - Selcuk
{{ device.coordinates }}是设备的纬度和经度信息。 - rubinlululu
可能是Django模板变量和Javascript的重复问题。 - inejc
6个回答
11

这个有效

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

唯一的问题在于你的 myVar 会变成一个字符串，

因此，如果你需要它作为对象、数组等，那就不是你需要的。

4

我的解决方案：

  1. create button pass this below properties
    <button type="button" onclick="check(varsize = '{{ size.sizeDes}}' ); return false type="btsize">`
  2. write script on header part
    {% block javascript %}
<script>
function check(varsize) {
    document.getElementById("sizeid").value = varsize;
}
</script>
{% endblock %}
1
如果您要传递坐标，很可能有一个包含纬度和经度的元组。在传递给Javascript函数时，必须将它们分开。
您可以尝试以下操作：
<div onclick=init_map({{ variables.0 }}, {{ variables.1 }})>
我在JavaScript中添加了两行代码，如下所示，然后lat和lon被接受了。非常感谢您的帮助！ function init_map(lat,lon) { var lat_float = parseFloat(lat); var lon_float = parseFloat(lon); - rubinlululu
1
我建议完全避免使用html中的onclick()。你可以将模板变量{{ variables }}传递到外部脚本中的javascript函数，然后添加事件监听器（click）以点击左列时执行函数。这样，你可以在脚本中的任何地方使用{{ variables }}，而且只需要在HTML中定义一次，而不必每次需要都将其作为onclick()参数传递（如果适用于你的情况）。即使不是这种情况，将页面逻辑（javascript）与结构（html）尽可能地分离也是一个更好的实践。
例如，在外部脚本中使用模板变量，你需要在django模板中的一个脚本标签之间声明变量，如下所示：
<script>
   var myVariables = {{ variables }};
</script>

如果在声明 myVariables 后加载外部脚本，你就可以在外部脚本中使用 myVariables，例如：

<script src="myExternalScript.js"></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会更简单，您可以这样做： jQuery 。
$('#leftBlockDivID').click(function(){
    init_map(myVariables);
});
当我移除了onclick例程时，右侧列不显示。 - rubinlululu
1
@rubinlululu 我假设你在你的脚本中添加了事件监听器，并包含了左侧列div的实际id名称？你是否查看了浏览器控制台以查看是否有任何错误？另外，请尝试var myVariables = "{{ variables }}"。请注意 {{ variables }}周围的引号。 - alacy
1
你也可以将变量传递到 data- 属性中：
<div data-variables="{{ variables }}">

或者甚至：

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

并为点击该html元素编写纯JavaScript监听器，其中您将检索这些数据属性。它使您避免使用onclick= 并直接传递给外部脚本或创建<script>元素来检索该数据。
0
当您尝试添加字符串时，请小心使用引号或双引号将标签包装起来，如果不这样做，Js会认为它是一个变量名并已经被定义了。
  <a onclick="console.log('{{ class_name.string_field }}')"
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接