在 ruby on rails 視圖中使用 javascript

Question

好吧，我是這里的 ruby noobie，我發現自己處於不幸的境地，我正在將一個項目從 Django 轉移到 Ruby on Rails。 首先，我正在設置我的 application.html.erb 文件，但我似乎無法讓 javascript 工作。 圖像和 css 正在通過，但不是 javascript。 資產目錄和 application.html.erb 文件中有 javascript 文件。 兩者都沒有通過。

我所有的圖像、css 和 javascripts 都位於 app/assets/ 中各自的目錄中。

我的 application.html.erb 文件頭標記：

<!DOCTYPE HTML>
<HTML>
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>The Atmosphere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/assets/atmosphere_favicon.png">
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" type="text/css" href="/assets/profile.css">
<link rel="stylesheet" type="text/css" href="/assets/advanced-slider-base.css">
<link rel="stylesheet" type="text/css" href="/assets/small-round-button.css">
<link rel="stylesheet" media="all" href="/assets/hover.css">


<script type="text/javascript" src="/assets/jquery-1.7.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery-ui.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/scroll.min.js"></script>
<!--<script type="text/javascript" src="js/jquery.transition.min.js"></script>-->
<script type="text/javascript" src="/assets/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="/assets/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="/assets/jquery.advancedSlider.min.js"></script>
<script type="text/javascript" src="/assets/simplyScroll.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery.marquee.js"></script>
<script type="text/javascript" src="/assets/jquery.pause.min.js"></script>
<script type="text/javascript" src="/assets/jquery.webticker.js"></script>
<script type="text/javascript" src="/assets/engine.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/assets/jquery.cookie.js"></script>


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


<!-- start soundmanager2 -->
<!-- demo, make the fonts nicer etc. -->


<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="/assets/flashblock.css" />

<!-- soundmanager required -->
<link rel="stylesheet" type="text/css" href="/assets/360player.css" />
<link rel="stylesheet" type="text/css" href="/assets/360player-visualization.css" />

<!-- sound manager Apache-licensed animation library -->
<script type="text/javascript" src="/assets/berniecode-animator.js"></script>

<!-- soundmanager core stuff -->
<script type="text/javascript" src="/assets/soundmanager2.js"></script>
<script type="text/javascript" src="/assets/360player.js"></script>

</head>

application.html.erb 文件中的 javascript 位於 body 結束 body 標記之前的兩個 script 標記之間。 篇幅很長，所以暫時省略了。

我知道 RoR 在資產管道方面有一些約定，我假設我在這里缺少一些 ruby 語法，但我習慣於只引用文件路徑並使一切正常。 另外，視圖中是否需要一些 ruby 語法來在 application.html.erb 函數中創建 javascript？ 現在它只是被引用為：

   <body>
     .
     .
      <script>
        .
        .
        .

      </script>
   </body>
</html>

謝謝你們！ 任何幫助表示贊賞。

我的 application.js 文件：

// 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 any plugin's vendor/assets/javascripts directory 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/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

application.css 文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

Answer 1

包含 javascript 的 Railsy 方法是使用：

<%= javascript_include_tag( 'your_script' ) %>

更多文檔在這里： http : //apidock.com/rails/ActionView/Helpers/AssetTagHelper/javascript_include_tag

application.js 只是一個將與資產管道一起預編譯的文件列表，因此您也可以在其中包含腳本，但如果您只想將腳本添加到特定視圖，這是要走的路。

Answer 2

在 Rails 中，您應該按如下方式組織資產：

app/assets用於應用程序擁有的資產，例如自定義圖像、JavaScript 文件或樣式表。

lib/assets用於您自己的庫代碼，這些代碼並不真正適合應用程序的范圍或那些跨應用程序共享的庫。

vendor/assets用於外部實體擁有的資產，例如 JavaScript 插件和 CSS 框架的代碼。 請記住，引用也由資產管道（圖像、樣式表等）處理的其他文件的第三方代碼需要重寫以使用諸如 asset_path 之類的幫助程序。 http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

Rails 使用鏈輪作為資產管道——鏈輪獲取你所有的腳本，並在生產中連接和縮小它們——這對於良好的性能至關重要。

所以首先將所有這些庫移動到/vendor/assets然后你可以將它們包含在你的 application.js 中

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-ui
//= require scroll
//...
//= require_tree .

因此，您可以使用布局中的一百萬個腳本標簽，而不是

<!DOCTYPE HTML>
<HTML>
  <head>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <title>The Atmosphere</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Rails 輔助方法javascript_include_tag和stylesheet_link_tag作用是為開發中的鏈輪清單中的每個文件創建一個單獨的腳本/鏈接標記，以便您獲得可用的行號進行調試。 在生產中，它們鏈接到一個帶有指紋的串聯縮小版本，這有助於避免緩存問題。

雖然一開始這聽起來可能令人困惑，但它確實解決了幾個真實的單詞問題，並且是一個非常可靠的工作流程。 花一點時間學習它肯定會得到回報。

如果您想頑固地手動編寫腳本標簽，則需要將您的資產放在/public/assets 。

另外，視圖中是否需要一些 ruby 語法來在 application.html.erb 函數中創建 javascript？

如果您在談論內聯腳本標記，則不需要特殊語法。 但是將 javascript 混合到您的 html 中是一種非常劣質的做法。

您可以通過javascript_include_tag 'foo'輕松地在單個頁面上包含腳本。

在 ruby on rails 視圖中使用 javascript

問題描述

2 個解決方案

解決方案1
1 2015-07-23 17:08:52

解決方案2
1 2015-07-23 17:22:52

在 ruby​​ on rails 視圖中使用 javascript

問題描述

2 個解決方案

解決方案1 1 2015-07-23 17:08:52

解決方案2 1 2015-07-23 17:22:52

在 ruby on rails 視圖中使用 javascript

解決方案1
1 2015-07-23 17:08:52

解決方案2
1 2015-07-23 17:22:52