0

アセット パイプラインを介して JavaScript を機能させるには何が欠けていますか?

チェーンされた jQuery を使用してアセットを操作しようとすると、正しく機能しませんが、javascript 関数をビューに直接配置すると、完全に機能します。

jquery-rails と coffee-rails gem をインストールしました。jquery.chained.mini.js コードを vendor\assets\javascript\jquery.chained.mini.js に保存しました。

プラグインを含めるように application.js を更新しました。

私は

$("#series").chained "#mark"

script ブロックを app\assets\javascript\vehicle.js.coffee ファイルに追加します。

ビューがロードされると、以下が head- の下にリストされます-

<head>
        . Edited for brevity
        .
        .   
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
        <script src="/assets/equipment.js?body=1" type="text/javascript"></script>
        <script src="/assets/sessions.js?body=1" type="text/javascript"></script>
        <script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
        <script src="/assets/users.js?body=1" type="text/javascript"></script>
        <script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
        <script src="/assets/application.js?body=1" type="text/javascript"></script>  
        .
        .
        .
  </head>

vehicle.js ページと同様に、jquery プラグインがあります。vehicle.js のソースは次のようになります。

(function() {
  $("#series").chained("#mark");
}).call(this);

これにより、編集ビューのドロップダウン リストが相互に依存するようになります。ただし、2 番目のドロップダウン ボックスの内容に関係なく、すべてのオプションを使用できます。

ただし、以下に示すように、スクリプトをビューに直接配置すると、完全に機能します。

edit.html.erb

<!DOCTYPE html>
<html>
<head>

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/equipment.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vehicles.css?body=1" media="all" rel="stylesheet" type="text/css" />

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>  

<meta content="authenticity_token" name="csrf-param" />
<meta content="PJnMEwkx/Ap2MQIHUsIcu0rYh+C6Or8VoVB9j2q9ptU=" name="csrf-token" />

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

<div>
<select id="mark" class="span2">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option></select>
<select id="series" class="span2"><option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

<script type="text/javascript" charset="utf-8">
  $(function(){$("#series").chained("#mark"); 
  });
</script>

</div>

</div>
</body>
</html>

コードが assett パイプラインで機能していないのに、それを直接ビューに入れたときの理由を誰かが説明できますか?

4

1 に答える 1

0

アセットをプリコンパイルしてみてください。

bundle exec rake assets:precompile

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

その後、Rails を再起動します。

于 2013-05-10T16:35:09.407 に答える