Ruby on Rails 和 Zurb Foundation Offcanvas 无法正常工作答案

【问题标题】：Ruby on Rails and Zurb Foundation Offcanvas not working correctlyRuby on Rails 和 Zurb Foundation Offcanvas 无法正常工作
【发布时间】：2013-11-26 06:47:11
【问题描述】：

我刚刚将我的 ui (Rails 4) 从 Bootstrap 移到 Foundation 5。我为大屏幕添加了一个普通的导航，为小屏幕添加了一个 Offcanvas 导航。更多详情请看这里：http://foundation.zurb.com/docs/components/offcanvas.html

当我单击菜单时，画布导航显示所有链接，然后我可以单击内容，再次打开导航，但是，当我单击导航中的链接时，我无法打开画布导航，看起来它被阻止了，我必须在浏览器中手动刷新我的视图。

这是我的代码：

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= content_for?(:title) ? yield(:title) : t('.siteTitle') %></title>

  <%= stylesheet_link_tag    'application'%>
  <%= javascript_include_tag 'vendor/modernizr' %>
  <%= csrf_meta_tags %>
</head>
<body>
    <!-- NAVIGATION Top Bar -->
    <!------------------------>
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <div class="contain-to-grid sticky fixed">
                <nav class="top-bar hide-for-small" data-topbar data-options="is_hover: false">
                  <ul class="title-area">
                    <li class="name">
                      <h1><%= link_to t('.siteTitle'), root_path, :id => 'newolu' %></h1>
                    </li>
                  </ul>
                  <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="right">
                      <li class="has-dropdown active">
                        <a href="#"><%=t('.menus')%></a>
                        <ul class="dropdown">
                          <li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
                        </ul>
                      </li>
                      <li class="has-dropdown">
                        <a href="#"><%=t('.changelanguage')%></a>
                        <ul class="dropdown">
                          <li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
                          <li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
                        </ul>
                      </li>
                    </ul>

                    <!-- Left Nav Section -->
                    <ul class="left">
                      <li class="has-form">
                      </li>
                    </ul>
                  </section>
                </nav>
            </div>

            <!-- NAVIGATION Offcanvas -->
            <!-------------------------->
          <div class="fixed show-for-small">
            <nav class="tab-bar">

              <section class="left tab-bar-section">
                <h1 class="title"><%= t('.siteTitle') %></h1>
              </section>

              <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
              </section>

            </nav>
          </div>

            <aside class="right-off-canvas-menu">
              <ul class="off-canvas-list">
                <li><label class="first">Newolu</label></li>
                <li><<%= link_to 'Home', root_path, :id => 'newolu' %></li>
              </ul>

              <hr>

              <ul class="off-canvas-list">
                <li><label><%=t('.menus')%></label></li>
                <li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
              </ul>

              <hr>

              <ul class="off-canvas-list">
                <li><label><%=t('.changelanguage')%></label></li>
                <li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
                <li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
              </ul>
            </aside>

            <!-- Content -->
            <!------------->
            <section class="main-section">
              <!-- Notice -->
              <!------------>
              <% if notice %>
                  <div data-alert class="alert-box info radius">
                    <p id="notice"><%= notice %></p>
                    <a href="#" class="close">&times;</a>
                  </div>
              <% end %>
              <!-- content goes here -->
              <%= yield %>
            </section>

            <a class="exit-off-canvas" href="#"></a>
        </div>
    </div>
    <%= javascript_include_tag 'application' %>
</body>

有谁知道为什么会出现这个问题？我的第二个问题是，以下代码 sn-p 中的文本没有左对齐，它在中心。当我把它改到右边或中间时，它在同一个位置是加减号。

<section class="left tab-bar-section">
            <h1 class="title"><%= t('.siteTitle') %></h1>
          </section>

这是一张图片：

image

希望有人可以帮助.. 非常感谢

【问题讨论】：

标签： jquery html css ruby-on-rails zurb-foundation

【解决方案1】：

将 data-no-turbolink 标志添加到包含您的链接的标签中，它将禁用该链接的 turbolink，从而触发完全重新加载。我刚刚在ios上测试过。无需禁用整个 turbolinks gem。<div data-no-turbolink><a href="/link"></a></div> 应该这样做。

【讨论】：

【解决方案2】：

问题与turbolinks gem 有关，它在新的 Rails 项目中默认启用。使用这个 gem，不会加载整个页面，只加载一些内容（由 Rails 智能识别）。检查Railscast。

要解决此问题会导致应用程序变慢，现在您将在单击的每个链接上看到整个页面刷新。不过，只需从基础 application.js 中删除（或评论直到修复）turbolinks 导入。

从这里： //= require turbolinks

对此：// require turbolinks

【讨论】：

Edward 的回答比较好，之前在文档里没找到那个东西！

【解决方案3】：

我在使用 turbolinks gem 时遇到了这个问题，并找到了适用于 rails 4.2.0 和 Foundation 5.5.1 的解决方案。

在您的 gemfile 中： gem 'jquery-turbolinks'

在命令行上： bundle install

重启你的服务器，然后在你的 application.js 中： //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks

通过使用 jquery-turbolinks gem 确保 turbolinks 最后运行，这解决了基础 javascripts 无法加载的所有问题。

【讨论】：