簡單導航中的自定義渲染器（Rails Gem）

Question

我正在嘗試爲simple_navigation rails gem創建自定義渲染器。到目前爲止，在閱讀爲引導版本的寶石所做的調整之後，我已經能夠對導航進行一些小的圖標更改，但是我完全不能使用它。

1. 我想補充一些設置我的渲染器，以適應這個的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> 
   

   1. 我無法弄清楚如何鋪陳ruby/rails代碼，以便它反映標記在小提琴中的行爲？

   2. 這裏的踢球者是孩子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元素是活動的......令人沮喪地......沒有失敗。

簡單導航是 - 默認情況下 - 配置它只呈現所有主要項目和活動主要項目的子導航，所以這是一個功能，而不是一個錯誤:-)。如果您需要獨立於活動項目呈現完整導航，則需要將:expand_all => true選項傳遞給render_navigation調用，而該調用又用於確定SimpleNavigation::Rendering::Renderer::Base#include_sub_navigation?的返回值。