带有帮助方法绕过链接的 Rails 上的引导下拉菜单答案

【问题标题】：Bootstrap Dropdown Menu on Rails with helper methods bypassing link带有帮助方法绕过链接的 Rails 上的引导下拉菜单
【发布时间】：2017-02-22 11:42:51
【问题描述】：

我正在尝试在 Rails 中使用辅助方法添加下拉菜单，但是当我在下拉列表中获得链接的 ul 时，它绕过了我的下拉链接标签...

application_helper.rb

  def nav_bar(c='nav nav-pills')
    content_tag(:ul, class: "#{c}") do
      yield
    end
  end

  def nav_dropdown(text)
    html_options = {data: {toggle:"dropdown"}, class:"dropdown-toggle", role:"button", aria:{haspopup:"true", expanded:"false"}}
    content_tag(:li, role:"presentation", class:"dropdown") do
      link_to raw(text + content_tag(:span, "",class:"caret")   ),"#", html_options
      nav_bar('dropdown-menu') do yield end

    end
  end

_menu.html.erb

  <%= nav_bar do %>
    ...

<% if current_user.admin? %>
    <%= nav_link t('menu.list_companies'), companies_path %>
    <%= nav_dropdown t('menu.configurations') do %>
     <%= nav_link t('menu.edit_process_types'), process_types_path %>
    <% end %>

<% end %>

当我有导航栏行时生成的html nav_bar('dropdown-menu') do yield end

    <li role="presentation" class="dropdown">
      <ul class="dropdown-menu">
        <li><a data-method="get" href="/process_types"><span class="translation_missing" title="translation missing: pt.menu.edit_process_types"> Edit Process Types</span></a>
        </li>
      </ul>
    </li>

当我从辅助方法中删除导航栏行nav_bar('dropdown-menu') do yield end时生成的html

<li role="presentation" class="dropdown">
  <a data-toggle="dropdown" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" href="#">
    Configurações<span class="caret"></span>
  </a>
</li>

我想联系：

<li role="presentation" class="dropdown">
  <a data-toggle="dropdown" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" href="#">
    Configurações<span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
     <li><a data-method="get" href="/process_types"><span class="translation_missing" title="translation missing: pt.menu.edit_process_types"> Edit Process Types</span></a>
     </li>
   </ul>
</li>

关于这里发生的事情以及如何达到预期结果的任何想法？

【问题讨论】：

标签： html ruby-on-rails twitter-bootstrap

【解决方案1】：

注意到 content_tag 只输出最后一行。然后我发现了这个：rendering text and html in a block of content_tag，在那里我看到了一种可能的方法。

最后，我将 application_helper.rb 更改为

  def nav_dropdown(text)

    html_options = {data: {toggle:"dropdown"}, class:"dropdown-toggle", role:"button", aria:{haspopup:"true", expanded:"false"}}
    content_tag(:li, role:"presentation", class:"dropdown") do

     link= link_to(raw(text + content_tag(:span, "",class:"caret")  ),"#", html_options)

     nav= nav_bar("dropdown-menu") do
        yield
       end

      link + nav
    end

  end

它终于成功地获得了所需的 html：

<li role="presentation" class="dropdown">
  <a data-toggle="dropdown" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" href="#">
  Configurações <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
          <li class="active"><a data-method="get" href="/process_types">Processos Modelo</a>
          </li>
  </ul>
</li>

【讨论】：