使用Django将变量用于for循环

2024-09-25 00:29:46 发布

您现在位置:Python中文网/ 问答频道 /正文

我对python和django框架非常陌生。我面临的一个小问题是无法将变量分配给for循环

在我的html文件中有按钮和列表(使用循环呈现)

例如:

按钮

<li><a class="layer-item" href="#" onclick="selectLayer('base')" title="Base layer">Base layer</a></li>
<li><a class="layer-item" href="#" onclick="selectLayer('soil')" title="Soil layers">Soil layers</a></li>

script标记内,我将变量值更新为

<script>
  var layerType = "";
  function selectLayer(layer){
    layerType = layer;
  }
</script>

在同一个html文件中,我还有如下循环

{% for layer in base %}
   <div class="col-4">
      <span class="base-layer-title d-block">{{layer.title}}</span>
   </div>
{% endfor %}

在这里,我想根据单击的按钮替换base

例如:

<a class="layer-item" href="#" onclick="selectLayer('soil')" title="Soil layers">Soil layers</a>

单击上面的按钮应将for循环设置为

{% for layer in soil %}
    <div class="col-4">
       <span class="base-layer-title d-block">{{layer.title}}</span>
    </div>
 {% endfor %}

据我所知,你可以这样做,给变量赋值

{% with name="World" %} But not sure how to implement it in my issue.

谢谢你的帮助


Tags: divlayerforbasetitlelayersliitem
1条回答
网友
1楼 · 发布于 2024-09-25 00:29:46

Also i have a loop like following in the same html file

{% for layer in base %} {{layer.title}} {% endfor %}

Here i want to replace base according the button clicked.

简而言之,Django是一个服务器端框架,它不能直接响应任何客户端活动。如果没有诸如React、JQuery等客户端库,您就无法有效地完成这项工作

解决方案1

您可以在单击时向服务器发出新请求,并使用新参数重新呈现整个页面

url.py

path('my_pattern/<slug:my_layer>', myview)

views.py

def myView(request, my_layer):
   # your logics
   base = get_layer_data(my_layer) # <  logic to get list dynamically
   return render(request, 'my_template.html', context={'base':base})

my_template.html

{% for layer in base %}
   <div class="col-4">
      <span class="base-layer-title d-block">{{layer.title}}</span>
   </div>
{% endfor %}
...
<a class="layer-item" href="/my_pattern/soil" title="Soil layers">Soil layers</a>
<a class="layer-item" href="/my_pattern/some_other_layer" title="Some other  layers">Soil layers</a>
...

base将在每个请求上动态生成数据

解决方案2

但是,您可以呈现页面上的所有数据,并使用引导中的折叠https://getbootstrap.com/docs/4.5/components/collapse/对其进行控制

相关问题 更多 >