Rails - 引导设置

Posted

技术标签:

【中文标题】Rails - 引导设置【英文标题】：Rails - Bootstrap setup 【发布时间】：2016-02-27 10:15:37 【问题描述】：

我正在尝试让 bootstrap javascript 在我的 rails 4 应用程序中工作。

我问了这些问题，但没有得到任何帮助。

https://***.com/questions/33685338/rails-with-bootstrap-tabs
https://***.com/questions/33852687/rails-4-bootstrap-date-picker

我越来越感到被这个挑战打败了。令人沮丧的是，bootstrap 被描述为一个简单的 rails 工具。如果有人可以帮助解决这个问题，我很乐意支付 100 美元。

我的问题特别出在 javascript 函数上。我的标签不起作用。当您单击链接时，没有任何反应。此外，日期选择器不起作用（我希望日历可以通过单击来选择日期）。

在我的 gem 文件中，我有：

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
gem 'jquery-rails'

在我的 application.html.erb 中，我有：

<link href='http://fonts.googleapis.com/css?family=Quicksand|Roboto:300' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="p:domain_verify" content="44c82789b3dcecac427e4b65123fb68d"/>
        <title><%= content_for?(:title) ? yield(:title) : "RE" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Ae" %>">
          <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
          <%= javascript_include_tag "application", "data-turbolinks-track" => false %>
          <%= csrf_meta_tags %>
          <%= favicon_link_tag %>
          <script src="https://www.google.com/jsapi"></script>
          <script src="https://www.youtube.com/iframe_api"></script>

Turbolinks 已关闭，因为我使用 olark。

在我的样式表文件夹中，我有文件名为：

application.css.scss：

 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */

按照下面列出的 cmets，我将此文件更改为名为 application.scss 并更改了顺序和引用：

*= require_tree .
 *= require_self
 *= require framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 */

framework_and_overrides.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

在我的 javascript 文件夹中，我有一个名为：

application.js：

 //= require jquery
//= require jquery_ujs
//= require underscore
//= require gmaps/google
//= require bootstrap-slider
//= require bootstrap-sprockets
//= require bootstrap-datepicker
//= require_tree .

project_dates.coffee.js

 $(document).on "focus", "[data-behaviour~='datepicker']", (e) ->
 - $(this).datepicker
 - format: "dd-mm-yyyy"
 - weekStart: 1
 - autoclose: true

然后，在我看来，我正在尝试使用引导选项卡，以便单击选项卡会在链接栏下方呈现部分内容：

<div class="containerfluid">

        <div class="row" style="margin-top:50px">
            <div class="col-xs-10 col-xs-offset-1">
                <ul class="nav nav-tabs nav-justified">
                    <li role="presentation" class="active"> <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
                    <li role="presentation"> <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
                    <li role="presentation"> <a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
                    <li role="presentation"> <a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
                    <li role="presentation"> <a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
                    <li role="presentation"> <a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>

                </ul>   
            </div>

        </div>


    <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <div class="intpolmin" style="margin-top: 50px; margin-bottom: 30px"> 
             We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with <em>emphasised</em> text.
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
                <div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>

                <div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
                <div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>

                <div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
                <div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>

            </div>
        </div>
    </div>
</div>

当您点击链接时，什么都不会发生。

在我的项目日期表单中，我有这个表单域：

<%= f.date_select :start_date, :label => "When does this project begin?", 'data-behaviour' => 'datepicker', order: [:day, :month, :year] %>

它不会生成日期选择器。相反，它只是 d/m/y 的三个单独字段。此外，标签不显示 - 但我可以解决这个问题。

我的设置有问题吗？

当我将 application.js 更改为删除时：

//= require bootstrap

然后 js 工作，因此当您单击顶部的选项卡链接之一时，它会跳下一长页文本到相关文本开始的位置。那不是我想要的。我想单击选项卡链接，并为此导致相关部分呈现在链接下方（以及所有其他部分不呈现）。

对 application.js 的更改不会导致日期选择器问题发生变化

当我尝试添加时：

Bundler.require(:default, Rails.env)

到我的 config/application.rb（根据这篇文章 Bootstrap-sass gem Javascript not Working in Rails 4）

我没有得到与上述问题不同的结果

当我尝试添加时

//= require bootstrap-sprockets

到我的 application.js（在 jquery 之后），js 停止工作 - 所以当我单击选项卡菜单中的链接时，什么都没有发生

我知道https://github.com/twbs/bootstrap-sass 的用户指南说：

bootstrap-sprockets and bootstrap should not both be included in application.js.

因此，我从 application.js 中删除了引导程序。

我也知道该 gem 的用户指南说：

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

我的 application.css.scss 中还有这个：

 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */

我阅读 gem 文档的意思是我将这些需要文件保存在我的 css 中做错了 - 但 gem 文档并没有告诉你改用什么。

上面写着：

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

你是怎么做到的？

整个 gem 文件复制如下：

source 'https://rubygems.org'


# ------------------ Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'


# ------------------ Use postgresql as the database for Active Record
gem 'pg'

# ------------------ Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'

# ------------------ Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'


# ------------------ Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'

# ------------------ See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

# ------------------ Use jquery as the JavaScript library
gem 'jquery-rails'


# ------------------ Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# gem 'turbolinks'


# ------------------ Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'


# ------------------ bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# ------------------ Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

# ------------------ Use Unicorn as the app server
# gem 'unicorn'

# ------------------ Use Capistrano for deployment
# gem 'capistrano-rails', group: :development


# ----------- USERS

# ------------------ authentication

gem 'devise', '3.4.1'
gem 'devise_zxcvbn'
gem 'omniauth'
gem 'omniauth-oauth2', '1.3.1'
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-linkedin-oauth2'
gem 'google-api-client', require: 'google/api_client'
# gem 'oauth2'
# ------------------ authorisation

gem 'pundit'

# ------------------ user roles

# ------------------ messaging

# ------------------ money

gem 'money-rails'

# ----------- CONTENT

gem 'state_machine'
gem 'acts_as_approvable'


# ------------------ file uploads
gem 'carrierwave'
gem 'mini_magick'
gem 'simple_form'

# ------------------ video
gem 'yt', '~> 0.25.5'
gem 'vimeo'

# ------------------ organisation
gem 'acts-as-taggable-on', '~> 3.4'

# ------------------ search

# ----------- OTHER

# ------------------ security

gem 'figaro'

# ------------------ performance
gem 'rails-observers'
gem 'high_voltage', '~> 2.4.0'

# ------------------ location

gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'

gem 'country_select'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :production do
  gem "rails_12factor"
end

ruby "2.2.2"

观看此视频 - https://gorails.com/episodes/styling-with-bootstrap-sass

设置看起来超级简单，但是本教程没有修改文件以删除对 require 的引用，正如 gem 文档所建议的那样（但我还没有这样做），但本教程仍然可以让引导程序正常工作。有什么人可以看到我可以尝试的吗？濒临崩溃……

如您所见 - 我已经为此尝试了一年多。我参加了每月一次的聚会、付费的代码导师和聘请的无法提供帮助的承包商。希望在这个板上出现奇迹。 Bootstrap Sass with Rails 4

尝试以下救援解决方案：

所以，我现在有：

样式表如下：

application.css

 *= require_tree .
 *= require_self
 */

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

framework_and_overrides.css.scss:


@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

javascript文件如下：

application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

application.html.erb：

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
              <%= javascript_include_tag "application", media: 'all', "data-turbolinks-track" => false %>

宝石文件：

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'

当我保存所有这些并完成建议的步骤时，上述内容没有任何变化。我单击顶部的选项卡链接中的一个链接，屏幕底部的小框显示“转到此页面上的#[链接选项卡名称]，但没有任何反应。

【问题讨论】：

您的调试控制台（例如萤火虫）有什么要说的？我认为文件没有正确加载。你能确认函数 datepicker 存在于渲染的 .js 中吗？ （查看您的应用程序主页的源代码，然后单击第一个 olark gem 3 年未更新。我会删除它并在没有它的情况下运行测试。 当我在主页点击查看源代码时，我得到这个错误：$(document).on "focus", "[data-behaviour~='datepicker']", (e) -> - $(this).datepicker - 格式：“dd-mm-yyyy” - weekStart: 1 - autoclose: true 虽然当我删除 project_dates.js 文件时，我在源代码查看器中没有收到任何错误，但是页面之间的选项卡不起作用 - 当您单击它们时，除了底部的选项卡之外什么也没有发生屏幕的显示我给每个链接的 href 名称 当我重新打开 turbo 链接并重新安装该 gem、捆绑并重新启动服务器时，这些链接在引导选项卡中仍然不起作用 【参考方案1】：

您正处于配置地狱中，而我已经构建了一个最小的工作产品来帮助您摆脱困境。为了实现这一点，我们会按出现的顺序解决您的问题，而不是尝试并行解决它们。此答案侧重于您的第一个问题，并且可能解决其他问题。

项目的自述文件副本如下。如果您需要访问该产品，请告诉我。

自述文件

这是一个演示应用程序，可帮助 ***user "user2860931" 解决问题 如此处所述。

问题按时间顺序排列：

[Q1] 11 月 13 日 Rails with Bootstrap Tabs

[Q2] 11 月 22 日 Rails 4 - Bootstrap date picker

[Q3] 11 月 24 日 Rails - Bootstrap setup

问题描述

已进行了许多配置尝试，但开发并不理想 环境可能通过添加文件中断了 Rails 命名约定 扩展。

使用的版本

导轨 4.2.5

自行创建此应用程序的步骤

首先检查合适的 Rails 版本

$ rails --version

    确保开发环境（IDE）不会自行添加文件扩展名

    创建一个新的 Rails 应用程序 

    
$ rails new rescue

    找到1.下创建的应用程序的Gemfile并注释掉 turbolinks gem 条目 删除说明链接以使视觉清晰

    将以下行添加到您的 Gemfile（可能需要将 gem 修复到 特定版本，以避免应用程序停止工作 计划外更新，但这是另一个问题） 

    
gem 'bootstrap-sass' #,          '3.3.5.1'

    运行 

    
$ bundle exec bundle update
$ bundle exec bundle install

    创建文件 app/assets/stylesheets/custom.css.scss 并添加以下内容 行： 

    
@import "bootstrap-sprockets";
@import "bootstrap";

    将以下行添加到 app/assets/javascripts/application.js 

    
//= require bootstrap

    重要提示：此行必须遵循 jquery 和 jquery-ujs 的行以及 在 require_tree 指令之前，以便生成的文件如下所示： 

    
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
    注意：我们删除了 turbolinks 行，以反映生产 用户“user2860931”的系统设置（***）。

    保存所有编辑好的文件后，检查开发环境是否 已更改文件扩展名（只是为了确保这次） 

    
  .
  ├── app
  │   ├── assets
  │   │   ├── images
  │   │   ├── javascripts
  │   │   │   └──application.js  
  │   │   └── stylesheets
  │   │       ├── application.css
  │   │       └── custom.css.scss

    生成一个最小控制器以及动作和相关视图 

    
$ rails generate controller planets index

    启动服务器 

    
$ rails s

    在您的浏览器中访问 

    
@987654324@

    彻底删除turbolinks的最后一步

      查看11中提到的站点的HTML源代码。

      从文件 app/views/layouts/application.html.erb 删除所有 data-turbolinks-track 属性，以便 ERB 代码如下所示： 

      
<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

      重复第 1 步，注意区别

    访问文件 app/views/planets/index.html.erb 并替换为您的 HTML 如 [Q1] 中所列

    此设置会在正确的选项卡面板下呈现您的部分。请注意 你在 Rails 的开发环境中工作。打电话给 

    
$ rake assets:clean
$ rake assets:precompile

    在部署主项目后可能需要查看更改（在 Rails 开发模式下不需要）。

    提示：使用模拟数据文件作为渲染函数的参数。 

    
app
│   └── views 
│       │ 
│       └── planets
│           ├── _dummy00.html.erb
│           ├── _dummy01.html.erb
│           ├── _dummy02.html.erb
│           ├── _dummy03.html.erb
│           ├── _dummy04.html.erb
│           ├── _dummy05.html.erb

并在 Q1 的 HTML 中使用对 render 'planets/dummy05' 的调用。确保每个虚拟文件包含略有不同的数据，以便能够检查工作选项卡。

模型结果通过引导程序提供选项卡，看起来像这样。

标签按预期工作。

通过为您提供最小的工作产品，您应该能够将您的设置带入工作状态。

在所有准备工作之后，只需按照官方文档添加一个日期选择器即可，回答Q2：

用于提供此答案的来源

https://www.railstutorial.org/ by Michael Hartl

http://getbootstrap.com/components/#nav

http://getbootstrap.com/javascript/#tabs

http://getbootstrap.com/javascript/#tabs-usage

http://guides.rubyonrails.org/asset_pipeline.html

【讨论】：

我对此充满希望。我无法再启动服务器来检查任何内容。我收到此错误：rails server bin/rails:6: warning: already initialized constant APP_PATH。我认为这可能与我试图让第 1 步正常工作的步骤之一有关。我将尝试解决该错误，然后再回来再试一次。 @user2860931：如果您正在使用这个答案并且真的是从头开始创建一个新项目，那么 1. 停止服务器 2. 运行命令“spring stop” 3. 检查命令“ps aux | grep -i spring" 如果还有一些相关进程正在运行。 4.从答案中的步骤（1）重新开始。你可以这样做。 服务器没有运行。我无法启动它。 @user2860931，好的 - 看起来你不再在线了。以下是您应该如何进行：不要试图立即将我的答案合并到您的主项目中，而是单独构建它并取得成功。 只有你才会进入你的主项目，使用你的版本控制系统并检查一个已知的工作状态，并结合你通过构建虚拟应用程序所取得的成就。您不要尝试一次性完成所有工作，但一次只做一件事。 @user2860931 不要这样想。我从 14 岁开始编程，或者大约 18 年（我是一名 php 程序员并切换到 Ruby/Rails）。然而，当我几年前开始使用 Rails 和 Bootstrap 时，我有同样的感受和非常相似的挫败感。对于任何学习新事物的人来说，这都是正常的。 “一分耕耘一分收获”，还记得吗？ :) 无论如何，我将做与@benjamin 所做的完全相同的事情，并构建一个最小的工作版本。所以我建议：1）@benjamin，把它放到 GitHub 上进行协作怎么样？ 2) @user2860931 一次一步很关键，尤其是在开始的时候。`【参考方案2】：

我遇到了与您相同的问题，并找到了适合我的解决方案（在深网中挖掘）。尝试在.css 文件中的require_tree . 行之后添加要求，并在.js 文件中仅添加您使用的datepicker；如下：

application.css

 ...
 *= require_tree .
 *= require_self
 *= require bootstrap
 *= require bootstrap-datepicker
 */

application.js

...
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require bootstrap-datepicker

它与Ruby on Rails的资产管道有关，您可以在此页面http://guides.rubyonrails.org/asset_pipeline.html中进一步讨论此主题，但首先尝试更改行的顺序。

【讨论】：

您好 Juan，我尝试实施您的建议。第一个错误出现在 application.css.scss - 说找不到引导程序。我尝试用引导链轮替换它并得到同样的错误。我尝试删除引导引用（因为我通过我的框架导入引导链轮和引导并覆盖 css 文件。加载，但 js 在选项卡上不起作用。 使用rails gem时无需下载文件

以上是关于Rails - 引导设置的主要内容，如果未能解决你的问题，请参考以下文章

迭代rails中的引导选项卡内容

rails 应用程序中的引导程序，404（未找到）

Rails 4 - 放置 jQuery 和引导程序的顺序是啥？

在 Rails 中引导 Typeahead

Rails 的脚手架 - 引导应用程序

Rails：使用 ajax 填充引导下拉列表