Rails 应用程序中的 Foundation 5 顶部栏不起作用答案

【问题标题】：Foundation 5 top-bar in Rails app not workingRails 应用程序中的 Foundation 5 顶部栏不起作用
【发布时间】：2015-08-25 11:55:03
【问题描述】：

在尝试了不同的示例并多次运行我的代码后，我无法弄清楚为什么我的顶栏上的下拉菜单不起作用。我尝试了每次搜索中出现的“无数据涡轮链接”技巧，但无济于事。

我也尝试过添加 jquery.turbolinks。越来越令人沮丧了。

我什至已经为 Zurb 自己的顶栏示例加载了 html。不劳而获。

我正在使用 Rails 4.2.0、jquery-rails 和 Foundation-rails 5.5.0。

我不确定要包含哪些代码，所以如果您有任何问题，如果您需要，我很乐意将其合并。

以下是我的 _navbar.html.erb（这是来自基金会网站顶部栏示例的 c/p）：

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

这是我的 application.html.erb：

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


    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>

  <%= render partial: "elements/navbar" %>

  <body>

    <%= yield %>

  </body>
  <%= render partial: "elements/footer" %>
</html>

还有我的 application.js 文件（删除 turbolinks 的引用后）：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

我的 Gemfile（删除 turbolinks 后）：

source 'https://rubygems.org'

gem 'rails', '>= 4.2.0'


group :test, :development do
  gem 'rspec-rails'
  gem 'factory_girl_rails'
  gem 'sqlite3', require: false
  gem 'database_cleaner'
  gem 'capybara'
end

group :production do
  gem 'thin', require: false
  gem 'pg', require: false
end

gem 'bundler'
gem 'foundation-rails', '>= 5.5'
gem 'sass-rails'
gem 'sass', '>= 3.3'
gem 'nav_lynx'
gem 'jbuilder', '~> 2.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'


gem 'uglifier', '>= 1.3.0'

gem 'sdoc', '~> 0.4.0',          group: :doc, require: false


gem 'spring',        group: :development

【问题讨论】：

你是否包含了 js 文件？（基础和现代化）
modernizr 在那里，foundation.js 是从 gem 位置提供的，不是吗？我是新手，但我非常严格地按照 Zurb 网站上安装基础的说明进行操作。
如果您完全关闭 turbolinks 是否有效，即删除 javascript 包含和 gem？
不行，这样做之后就不行了。
编辑我上面的评论。foundation.js 来自 app/assets/javascript/foundation 文件夹。所以是的，它就在那里，因为我在 application.js 中包含了正确的 require 标记

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

【解决方案1】：

尝试在结束 body 标签之前移动它：

<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>

【讨论】：

【解决方案2】：

在运行rails g foundation:install 并允许该命令覆盖主应用程序 ERB 文件后，您将在 javascript_include_tag 中得到一个 turbolinks 代码。

在你的 application.html.erb 中，改变这个...

<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>

到这个...

<%= javascript_include_tag "application" %>

这个单行代码更改应该可以解决它。它对我有用。

【讨论】：

您能解释一下为什么会这样吗？在安装foundation时，您会认为foundation添加turbolinks代码是必要的。