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

converting regular javascript implementation to ruby on rails javascript implementation

本文关键字：实现 javascript on rails ruby 转换 常规      更新时间：2023-09-26

我在一个常规的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的末尾，我想将jqueryjavascript和jquery-backstretch.min文件合并到我的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>

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

我该怎么办？

编辑：

我已经将修改后的文件添加到我的应用程序.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>

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

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

步骤#1安装gem仰泳导轨步骤#2移除//=需要仰泳步骤#3添加<%= javascript_include_tag "jquery.backstretch" %>

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

到您的index.html.erb视图。机身顶部标签

步骤#4添加

 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" for me

相关文章：