将常规 javascript 实现转换为 ruby on rails javascript 实现答案

【问题标题】：converting regular javascript implementation to ruby on rails javascript implementation将常规 javascript 实现转换为 ruby on rails javascript 实现
【发布时间】：2014-10-31 18:56:11
【问题描述】：

我在常规 index.html 中有以下代码

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Template</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">
   </head>

  <body>

  <!-- A BUNCH OF OTHER CODE..... -->

    <!-- THIS IS WHAT I WANT ! -->

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <!--BACKSTRETCH-->
    <!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
    <script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
    <script>
        $.backstretch("assets/img/solar.jpg", {speed: 500});
    </script>

    <!-- END OF WHAT I WANT -->


  </body>
</html>

在 index.html 的末尾，我想将 jquery javascript 和 jquery-backstretch.min 文件合并到我的 rails 应用程序中。有没有标准的 rails 方法可以做到这一点？

我尝试将以下内容注入到 rails new.html.erb

<!-- js placed at the end of the document so the pages load faster -->
<%= javascript_include_tag '../assets/javascripts/jquery.js', 'data-turbolinks-track' => true %>

<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
<%= javascript_include_tag '../assets/javascripts/jquery.backstretch.min.js"', 'data-turbolinks-track' => true %>

<script>
    $.backstretch("assets/images/solar.jpg", {speed: 500});
</script>

和

<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/javascripts/jquery.js"></script>

<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
<script type="text/javascript" src="assets/javascripts/jquery.backstretch.min.js"></script>
<script>
    $.backstretch("assets/images/solar.jpg", {speed: 500});
</script>

但不幸的是，他们似乎都错了。

我该怎么办？

编辑：

我已将修改后的文件添加到我的 application.js 中，所以现在看起来像这样

//= require jquery
//= require jquery_ujs
//= require jquery.backstretch.min
//= require turbolinks
//= require_tree .

从那时起，我从 new.html.erb 中删除了相应的脚本标签。现在，在底部，它只包含脚本调用

<script>
    $.backstretch("assets/images/solar.jpg", {speed: 500});
</script>

但不幸的是，这仍然不正确

【问题讨论】：

jQuery是否设置在底部？也许问题来自backstrectch 脚本。
嗯我不确定你的意思。我应该将 jquery 移到顶部吗？
调用$.backstretch时，是否设置了$？

标签： javascript ruby-on-rails ruby-on-rails-4 asset-pipeline

【解决方案1】：

我有一个您可以使用的解决方案。 backstretch 插件的 javascript 正在使用此方法。我目前在一页上使用它，因为如果您将 require 语句和方法的 javascript 添加到 application.js 文件，backstretch 将在所有页面上触发。

步骤 #1 安装 gem backstretch-rails 步骤 #2 移除 //= 需要回弹步骤#3 添加<%= javascript_include_tag "jquery.backstretch" %>

<%= javascript_include_tag "backstretch-landing-index" %>

到您的 index.html.erb 视图。正文标签的顶部

第四步添加

 Rails.application.config.assets.precompile += %w( jquery.backstretch.js )
 Rails.application.config.assets.precompile += %w( backstretch-landing-index.js )

到你的初始化器/assets.rb 文件

在backstretch-landing-index.js里面添加你要调用的函数

$.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
], {duration: 3000, fade: 750});

有效！！带有图像的完整路径链接。 "/assets/photo1.png"给我

【讨论】：