如何在Alchemy CMS的element_view_for中获取元素索引实现Bootstrap5轮播

要在Alchemy元素迭代过程中获取索引，从而给Bootstrap轮播的第一个元素添加active类，你可以借助Ruby的each_with_index方法遍历元素集合，直接拿到每个元素的位置索引。

具体实现代码 #

假设你需要遍历当前页面中所有image_slide类型的元素，代码可按如下方式编写：

<%= elements.find_all_by_name('image_slide').each_with_index do |image_slide, index| %>
  <%= element_view_for(image_slide, tag: false) do |el| %>
    <div class="carousel-item <%= 'active' if index == 0 %>">
      <%= el.render :image, {}, class: "d-block w-100" %>
    </div>
  <% end %>
<% end %>

关键说明 #

• 通过elements.find_all_by_name('image_slide')获取当前页面内指定名称的元素集合，再用each_with_index遍历，同时获取元素对象和对应的索引值index。
• 在carousel-item的class属性中，通过index == 0的判断给第一个元素添加active类，满足Bootstrap轮播对激活项的要求。
• 轮播的激活状态仅需作用在carousel-item容器上，图片标签无需额外添加active类。

嵌套子元素场景适配 #

如果image_slide是某个父元素的嵌套子元素，可通过父元素对象获取子元素集合后再遍历：

<%= element_view_for(parent_element) do |parent_el| %>
  <% parent_el.named_elements('image_slide').each_with_index do |image_slide, index| %>
    <%= element_view_for(image_slide, tag: false) do |el| %>
      <div class="carousel-item <%= 'active' if index == 0 %>">
        <%= el.render :image, {}, class: "d-block w-100" %>
      </div>
    <% end %>
  <% end %>
<% end %>

这里通过parent_el.named_elements('image_slide')获取父元素下的所有目标子元素，再用each_with_index拿到索引进行判断即可。

内容的提问来源于stack exchange，提问作者flyte321