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

Posted 2023-02-23

技术标签:

【中文标题】django：如何将模板变量传递给 javascript onclick 例程？【英文标题】：django: how to pass template variable to javascript onclick routine? 【发布时间】：2015-04-15 11:15:23 【问题描述】：

概念来源于此http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic

我在 django 模板中启用了 2 个块，左侧块显示设备信息（设备名称和位置信息），右侧块显示设备地图位置。当用户可以单击左侧面板时，右侧地图将通过将 Django 模板变量传递给javascript 例程。 init_map 似乎不接受传递的变量。

当用户点击左列时，右图会根据纬度进行切换，纬度由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)”，则不会显示地图。

【问题讨论】：

你variables的内容是什么？当您使用浏览器查看 html 源代码时，您会看到什么？ device.coordinates ，包括设备的“纬度”和“经度”。 Django Template Variables and Javascript的可能重复 【参考方案1】：

这行得通

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

唯一的事情就是你的 myVar 会变成一个字符串，

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

【讨论】：

【参考方案2】：

我的解决方案：

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

【讨论】：

【参考方案3】：

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

你可以试试这个：

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

【讨论】：

我在 javascript 中添加 2 行如下，然后接受 lat 和 lon，非常感谢您的帮助！函数 init_map(lat,lon) var lat_float = parseFloat(lat); var lon_float = parseFloat(lon);【参考方案4】：

我建议完全避免使用 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，上面的事件处理程序会更容易编写，您可以执行以下操作：

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

【讨论】：

当我删除 onclick 例程时，右列不显示。 @rubinlululu 我假设您在脚本中添加了事件侦听器并包含左列 div 的实际 ID 名称？您是否查看过浏览器控制台以查看是否有任何错误？另外，请尝试var myVariables = " variables "。注意 variables 周围的引号。【参考方案5】：

你也可以将你的变量传递给data-属性：

<div data-variables=" variables ">

甚至：

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

并映射纯 javascript 侦听器以单击该 html 元素，您将在其中检索这些数据属性。它可以让您避免使用 onclick= 并将其直接传递给外部脚本或创建 <script> 元素来检索该数据。

【讨论】：

【参考方案6】：