Question

我正在尝试为simple_navigation rails gem创建自定义渲染器。到目前为止，在阅读了针对gem的bootstrap版本的调整之后，我已经能够对我的导航进行一些小的图标更改但是我完全陷入困境。

我正在尝试添加一些设置我的渲染器以容纳在此JSfiddle中找到的标记： http://jsfiddle.net/v5Yhc/

<ul class="nav navbar-collapse collapse navbar-collapse-primary">

  <li class="active">
    <span class="glow"></span>
    <a href="dashboard.html">
        <i class="icon-dashboard icon-2x"></i>
        <span>Dashboard</span>
    </a>
  </li>

  <li class="dark-nav ">
    <span class="glow"></span>

    <a class="accordion-toggle collapsed " data-toggle="collapse" href="#yJ6h3Npe7C">
        <i class="icon-beaker icon-2x"></i>
              <span>
                UI Lab
                <i class="icon-caret-down"></i>
              </span>
    </a>

    <ul id="yJ6h3Npe7C" class="collapse ">  
      <li class="">
        <a href="../ui_lab/buttons.html">
            <i class="icon-hand-up"></i> Buttons
        </a>
      </li>

      <li class="">
        <a href="../ui_lab/general.html">
            <i class="icon-beaker"></i> General elements
        </a>
      </li>

      <li class="">
        <a href="../ui_lab/icons.html">
            <i class="icon-info-sign"></i> Icons
        </a>
      </li>

      <li class="">
        <a href="../ui_lab/grid.html">
            <i class="icon-th-large"></i> Grid
        </a>
      </li>

      <li class="">
        <a href="../ui_lab/tables.html">
            <i class="icon-table"></i> Tables
        </a>
      </li>

      <li class="">
        <a href="../ui_lab/widgets.html">
            <i class="icon-plus-sign-alt"></i> Widgets
        </a>
      </li>
    </ul>
  </li>

  <li class="">
    <span class="glow"></span>
    <a href="../forms/forms.html">
        <i class="icon-edit icon-2x"></i>
        <span>Forms</span>
    </a>
  </li>

  <li class="">
    <span class="glow"></span>
    <a href="../charts/charts.html">
        <i class="icon-bar-chart icon-2x"></i>
        <span>Charts</span>
    </a>
  </li>

  <li class="dark-nav ">

    <span class="glow"></span>

    <a class="accordion-toggle" data-toggle="collapse" href="#WLGsdJPav9">
        <i class="icon-link icon-2x"></i>
              <span>
                Others
                <i class="icon-caret-down"></i>
              </span>
    </a>

    <ul id="WLGsdJPav9" class="in" style="height: auto;">      
      <li class="">
        <a href="../other/wizard.html">
            <i class="icon-magic"></i> Wizard
        </a>
      </li>

      <li class="">
        <a href="../other/login.html">
            <i class="icon-user"></i> Login Page
        </a>
      </li>

      <li class="">
        <a href="../other/sign_up.html">
            <i class="icon-user"></i> Sign Up Page
        </a>
      </li>
    </ul>
  </li>
</ul>

我无法弄清楚如何布置ruby / rails代码，以便反映小提琴中标记的行为？
这里的踢球者是必须在页面加载时呈现子UL / LI元素，但是简单的导航GEM隐藏它们直到它们的父UL / LI元素处于活动状态....令人沮丧....没有失败。

以下是我的自定义渲染器代码：

class Admin < SimpleNavigation::Renderer::Base
  def render(item_container)
    config_selected_class = SimpleNavigation.config.selected_class
    SimpleNavigation.config.selected_class = 'active'
    list_content = item_container.items.inject([]) do |list, item|
      li_options = item.html_options.reject {|k, v| k == :link}
      icon = li_options.delete(:icon)
      split = (include_sub_navigation?(item) and li_options.delete(:split))
      li_content = content_tag(:span, '', class: 'glow')
      li_content << tag_for(item, item.name, icon, split)
      if include_sub_navigation?(item)
        if split
          lio = li_options.dup
          lio[:class] = [li_options[:class], 'dropdown-split-left'].flatten.compact.join(' ')
          list << content_tag(:li, li_content, lio)
          item.html_options[:link] = nil
          li_options[:id] = nil
          li_content = tag_for(item)
        end
        item.sub_navigation.dom_class = [item.sub_navigation.dom_class, 'dropdown-menu', split ? 'pull-right' : nil].flatten.compact.join(' ')
        li_content << render_sub_navigation_for(item)
        li_options[:class] = [li_options[:class], 'dropdown', split ? 'dropdown-split-right' : nil].flatten.compact.join(' ')
      end
      list << content_tag(:li, li_content, li_options)
    end.join
    SimpleNavigation.config.selected_class = config_selected_class
    if skip_if_empty? && item_container.empty?
      ''
    else  
      content_tag(:ul, list_content, {:id => item_container.dom_id, :class => item_container.dom_class}) 
    end
  end

  protected

  def tag_for(item, name = '', icon = nil, split = false)
    unless item.url or include_sub_navigation?(item)
      return item.name
    end
    url = item.url
    link = Array.new
    link << content_tag(:i, '', :class => [icon].flatten.compact.join(' ') + ' icon-2x') unless icon.nil?
    link << name
    if include_sub_navigation?(item)
      item_options = item.html_options
      item_options[:link] = Hash.new if item_options[:link].nil?
      item_options[:link][:class] = Array.new if item_options[:link][:class].nil?
      unless split
        #item_options[:link][:class] << 'dropdown-toggle'
        item_options[:link][:class] << 'in'
        #item_options[:link][:'data-toggle'] = 'dropdown'
        item_options[:link][:'data-toggle'] = 'collapse'
        item_options[:link][:'data-target'] = '#'
        #link << content_tag(:b, '', :class => 'caret')
        link << content_tag(:b, '', :class => 'icon-caret-down')
      end
      item.html_options = item_options
    end
    link_to(link.join(" ").html_safe, url, options_for(item))
  end

end

有人是simple_navigation高手吗？

谢谢！

Answer 1

关于你的两个具体问题：

我无法弄清楚如何布置ruby / rails代码，以便它反映小提琴中标记的行为？

目标html结构对我来说似乎很复杂。有什么方法可以简化这个吗？另外，如果您将simple-navigation bootstrap renderer分叉，可能会更容易提供帮助，因此您更改的内容会更明显。

这里的踢球者必须在页面加载时呈现子UL / LI元素，但是简单的导航GEM会隐藏它们直到它们的父UL / LI元素处于活动状态....令人沮丧地......没有失败。< / p>

简单导航 - 默认情况下 - 配置为只渲染所有主要项目和活动主要项目的子导航，因此这是一个功能，而不是错误:-)。如果您需要独立于有效项目呈现完整导航，则需要将:expand_all => true选项传递给render_navigation调用，而后者又用于确定SimpleNavigation::Rendering::Renderer::Base#include_sub_navigation?的返回值

简单导航中的自定义渲染器（Rails宝石）

1 个答案: