Twitter在Rails 3中引导一个区域设置选择器下拉列表 [英] Twitter Bootstrapping a locale selector drop-down in Rails 3

问题描述

我有一个非Bootstrapped的区域设置选择器在我通常的Bootstrapped Rails 3应用程序，我想要Bootstrap-ify。关于如何在下拉菜单中的表单中做出（我假设）无序列表，我有点困惑。

TL; DR 转到此问题底部的编辑3完成解决方案。

当前的代码以下列方式实现：

app / views / layouts / _header.html.haml

 ％header.navbar.navbar-fixed-top 
 .navbar-inner 
 .container 
 ＃... 
％nav 
％ul.nav.pull-right 
＃... 
％li =渲染'layouts / locale_selector'，
控制器：控制器
操作：action 
＃（控制器，从application.html.haml传入的动作参数）
  

app / views / layouts / _locale_selector.html.haml

  = form_tag（{controller：controller，
 action：action}，
 method：'get'，
 class：'locale'）do 
 = select_tag'set_locale'，
 options_for_select（locale_languages，I18n.locale）
 = hidden_​​field_tag'page'，params [：page] if params [：page] 
 = submit_tag'submit'
  / pre> 
 
 
  app / helpers / application_helper.rb  
 code> module ApplicationHelper 
＃... 
 def locale_languages 
 [
 [t（'locale_selector.en'），'en']，
 [ t（'locale_selector.it'），'it']，
 [t（'locale_selector.ja'），'ja'] 
] 
 end 
 end 
  
  app / assets / stylesheets / bootstrap_and_overrides.css.scss  
 ＃... 
 .locale {
 padding-top：5px; 
 padding-left：5px; 
保证金：-0.25em; 
 #set_locale {
 width：85px; 
 height：36px; 
颜色：$ grayLight; 
 border：none; 
背景：无; 
 text-align：center; 
&：hover {
 color：$ white; 
 text-decoration：none; 
} 
} 
} 
  
 应用/资产/javascripts/application.js.coffee 
  $  - > 
 $（。locale input）。hide（）
 $（＃set_locale）。change  - > 
 $（this）.closest（form）。submit（）
  
阅读通过 Bootstrap组件文档，我更改了 header.html.haml 到下面的代码，以获得显示我想要的下拉列表，但它的内容是在 select_tag ， options_for_select  etc显示/正常工作，我不确定：
 
 
 
  app / views / layouts / _header.html.haml  
 ＃... 
％li＃fat-menu.dropdown 
％a.dropdown-toggle {data-toggle=> drop，href：＃} 
 = t（'。language'）
％b.caret 
 .dropdown-menu 
 = render'layouts / locale_selector' 
控制器：控制器，
操作：动作
  
我试图找到表单上的Bootstrap文档中的信息，并通过搜索StackOverflow和Google，但无济于事我敢打赌我缺少一些简单和/或微不足道的东西，但是Bootstrap专家可以帮助我吗？
 
 
 
编辑
 
 
 
更改了2个文件以使下拉菜单看起来不错，但仍然没有提交... 
 
 
 
  app / helpers / application_helper。 rb  
  module ApplicationHelper 
＃... 
 def locale_languages 
 [ 
 {label：t（'locale_selector.en'），locale：'en'}，
 {label：t（'locale_selector.it'），locale：'it'}，
 {label：t（'locale_selector.ja'），locale：'ja'} 
] 
 end 
 end 
  
  app / views / layouts / _locale_selector.html.haml  
  = form_tag（{controller：controller，
 action：action}，
 method：'get'，
 class：'locale'）do 
  -  locale_languages.each做|语言| 
％li = link_to language [：label]，'＃'，value：language [：locale] 
 = hidden_​​field_tag'page'，params [：page] if params [：page] 
 = submit_tag'submit'
  
 
 
 
编辑2 
 
 
 
  app / assets / javascripts / application.js.coffee  
  $  - > 
 $（。locale input）。hide（）
 $（。locale）。点击 - > 
 $（this）.closest（form）。submit（）
  
现在提交，但是我的所有原始后端处理我的 ApplicationController 中的 params [：set_locale] 已被破坏（不会把代码放在这里，但是好奇的这里是），所以语言环境不会改变。需要尝试让它传回一个 params [：set_locale]  value ... 
 
 
 
编辑3：完成的解决方案
 
 
 
完全删除了这个表单，我应该首先在@simbirsk和@quick_brown_fox中指出。非常感谢，伙计们。以下是最终的代码：
 
 
 
  app / views / layouts / _header.html.haml  
 ％header.navbar.navbar-fixed-top 
 .navbar-inner 
 .container 
＃... 
％ nav 
％ul.nav.pull-right 
＃... 
％li = render'layouts / locale_selector'，
 controller：controller，
 action：action 
＃（控制器，从application.html.haml传入的动作参数）
  
  app / views / layouts / _locale_selector.html.haml  
 ％li＃fat-menu.dropdown 
％a.dropdown-toggle {data-toggle=> drop，href：＃} 
 = t（'。language'）
％b.caret 
％ul.dropdown-menu 
  -  locale_languages.each do |语言| 
％li 
 = link_to language [：label]，
 controller：controller，
 action：action，
 set_locale：language [：locale]，
页面：params [：page] 
  
  app / helpers / application_helper.rb  
 模块ApplicationHelper 
＃... 
 def locale_languages 
 [
 { label：t（'locale_selector.en'），locale：'en'}，
 {label：t（'locale_selector.it'），locale：'it'}，
 {label：t 'locale_selector.ja'），locale：'ja'} 
] 
 end 
 end 
  
上面提到的 app / assets / stylesheets / bootstrap_and_overrides.css.scss 和 app / assets / javascripts / application.js.coffee 中的代码完全是删除，因为它变得多余。
 
 
 
 更新：
这似乎得到了很多的意见，所以：
 
 
 
 
 
您可以找到语言环境下拉列表的完整实现，包括控制器中的代码这里 > Rails教程 
 
 
 
 
解决方案
您的< select> ; 解决方案看起来不错，但不幸的是这不是Bootstrap本机。
 
如文档中所述，导航栏下拉列表的标记如下：
 < div class =dropdown> 
< a class =dropdown-toggleid =dLabelrole =buttondata-toggle =dropdowndata-target =＃href =/ page.html> 
语言
< b class =caret>< / b> 
< / a> 
< ul class =dropdown-menurole =menuaria-labelledby =dLabel> 
< li>< a href =＃>英文< / a>< / li> 
< li>< a href =＃>葡萄牙语< / a>< / li> 
 ... 
< / ul> 
< / div> 
  
所以，如果你想保持自举，调整你的代码，并生成（dinamically，如果你希望）收集< li> ，其中包含每种语言的链接。您可以使用<％= link_to％>  
 
发布所需的任何数据
I have a non-Bootstrapped locale selector in my otherwise generally Bootstrapped Rails 3 app that I want to Bootstrap-ify.  I'm a bit stumped as to how to make an (I assume) unordered list in a form in a dropdown menu.  

TL;DR Go to Edit 3 at the bottom of this question for the completed solution.

The current code is implemented in the following way:

app/views/layouts/_header.html.haml
%header.navbar.navbar-fixed-top
  .navbar-inner
    .container
      # ...
      %nav
        %ul.nav.pull-right
          # ...
          %li= render 'layouts/locale_selector',
                       controller: controller, 
                       action: action
          # (controller, action params passed in from application.html.haml)
app/views/layouts/_locale_selector.html.haml
= form_tag({ controller: controller,
             action: action },
             method: 'get',
             class: 'locale') do
  = select_tag 'set_locale',
               options_for_select(locale_languages, I18n.locale)
  = hidden_field_tag 'page', params[:page] if params[:page]
  = submit_tag 'submit'
app/helpers/application_helper.rb
module ApplicationHelper
  # ...
  def locale_languages
    [
      [t('locale_selector.en'), 'en'],
      [t('locale_selector.it'), 'it'],
      [t('locale_selector.ja'), 'ja']
    ]
  end
end
app/assets/stylesheets/bootstrap_and_overrides.css.scss
# ...
.locale {
  padding-top: 5px;
  padding-left: 5px;
  margin: -0.25em;
  #set_locale {
    width: 85px;
    height: 36px;
    color: $grayLight;
    border: none;
    background: none;
    text-align: center;
    &:hover {
      color: $white;
      text-decoration: none;
    }
  }
}
app/assets/javascripts/application.js.coffee
$ ->
  $(".locale input").hide()
  $("#set_locale").change ->
    $(this).closest("form").submit()
By reading through the Bootstrap component documentation I've changed header.html.haml to the code below to get the drop-down list displaying how I want, but it's getting the content in the select_tag, options_for_select etc displaying/working correctly that I'm not sure about:

app/views/layouts/_header.html.haml
# ...
%li#fat-menu.dropdown
  %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"}
    = t('.language')
    %b.caret
  .dropdown-menu
    = render 'layouts/locale_selector',
              controller: controller,
              action: action
I've tried to find info in the Bootstrap documentation on forms and by searching around StackOverflow and Google, but to no avail.  I bet I'm missing something simple and/or trivial, but could any Bootstrap experts help me out?

Edit

Changed 2 files to get the drop-down looking nice, but it still doesn't submit yet...

app/helpers/application_helper.rb
module ApplicationHelper
  # ...
  def locale_languages
    [
      { label: t('locale_selector.en'), locale: 'en' },
      { label: t('locale_selector.it'), locale: 'it' },
      { label: t('locale_selector.ja'), locale: 'ja' }
    ]
  end
end
app/views/layouts/_locale_selector.html.haml
= form_tag({ controller: controller,
             action: action },
             method: 'get',
             class: 'locale') do
  - locale_languages.each do |language|
    %li= link_to language[:label], '#', value: language[:locale]
  = hidden_field_tag 'page', params[:page] if params[:page]
  = submit_tag 'submit'


Edit 2

app/assets/javascripts/application.js.coffee
$ ->
  $(".locale input").hide()
  $(".locale").click ->
    $(this).closest("form").submit()
Now it submits, but all my original backend handling of the params[:set_locale] in my ApplicationController is broken (won't put the code here, but for the curious here it is), so the locale doesn't change.  Need to try and get this to pass back a params[:set_locale] value...

Edit 3: The Completed Solution

Got rid of the form entirely, which I should have done in the first place as pointed out by @simbirsk and @quick_brown_fox.  Many thanks, guys.  Here is the final code:

app/views/layouts/_header.html.haml
%header.navbar.navbar-fixed-top
  .navbar-inner
    .container
      # ...
      %nav
        %ul.nav.pull-right
          # ...
          %li= render 'layouts/locale_selector',
                       controller: controller, 
                       action: action
          # (controller, action params passed in from application.html.haml)
app/views/layouts/_locale_selector.html.haml
%li#fat-menu.dropdown
  %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"}
    = t('.language')
    %b.caret
  %ul.dropdown-menu
    - locale_languages.each do |language|
      %li
        = link_to language[:label],
                  controller: controller,
                  action: action,
                  set_locale: language[:locale],
                  page: params[:page]
app/helpers/application_helper.rb
module ApplicationHelper
  # ...
  def locale_languages
    [
      { label: t('locale_selector.en'), locale: 'en' },
      { label: t('locale_selector.it'), locale: 'it' },
      { label: t('locale_selector.ja'), locale: 'ja' }
    ]
  end
end
Code mentioned above in app/assets/stylesheets/bootstrap_and_overrides.css.scss and app/assets/javascripts/application.js.coffee was completely removed as it became superfluous.

Update: 
This seems to be getting a lot of views, so:


You can find the full implementation of the locale drop-down, including the code in the controller here in the app I made for Michael Hartl's Rails Tutorial

解决方案
Your <select> solution looks great, but unfortunatelly that's not Bootstrap native.

As said in documents, markup for a navbar dropdown is as follows:
<div class="dropdown">
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
        Language
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">English</a></li>
        <li><a href="#">Portuguese</a></li>
        ...
    </ul>
</div>
So, if you want to stay "Bootstraped", adapt your code and generate (dinamically, if you wish) a collection of <li> containing links to each language. You can post any data you need using <%= link_to %>  

                        
这篇关于Twitter在Rails 3中引导一个区域设置选择器下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！