2017-07-29 16 views
1

Ruby on Rails 4.2.0でビュー固有のJavaScriptを使用したいので、ロードしたい場所に動的にロードしたいと思っていました。私は資産/ javascripts(headers.js)を読み込む必要がありますjavascriptファイルを置く。私はapplication.jsファイルのツリーラインを削除しました。Ruby on RailsでJavaScriptを表示

私はapplication.html.erb

application.html.erb

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Sandbox</title> 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
     <%= stylesheet_link_tag params[:controller] %> 
     <%= csrf_meta_tags %> 
     <%= render 'partials/shim' %> 
    </head> 
    <body> 
     <%= render 'partials/header' %> 
     <%= yield :javascript_includes %> 
     <%= render 'partials/footer' %> 
     <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    </body> 
</html> 

を更新していると私は、ビューの最上部にあるJavaScriptファイルを呼び出すために望んでいました。

view.html.erb

<% content_for :javascript_includes do %> 
    <%= javascript_include_tag "headers.js" %> 
<% end %> 

私もファイルassets.rb初期化子/ を更新しました:何らかの理由で

Rails.application.config.assets.precompile += %w(headers.js) 

ビュー意志のHTMLコンテンツをロードされず、コンソールにエラーが表示されます。Uncaught ReferenceError:jQueryが定義されていません。

なぜ機能しないのですか?どのように私はこの仕事をすることができ、何が私は行方不明ですか?

+1

たぶんあなたのファイルはjQueryのに依存し、あなたがロードしようとしていますRailsがjQueryをロードする前に、アセットの順番を変更すると動作するかどうかを確認する必要があります。 –

+0

'<%= javascript_include_tag" headers.js "%>'を試して、サーバーを再起動してください。どうしますか? –

答えて

1

代わりyieldjavascript_includesを渡し、あなたはビューで直接好きな場所自分の必要なJavaScriptのファイルを必要としてみてくださいは、のようなもの:同じよう

<%= javascript_include_tag "headers.js" %> 
    <div class="vertical-center"> 
    ... 

application.html.erbであなたのbody

<%= render 'partials/header' %> 
<%= yield %> 
<%= render 'partials/footer' %> 

そして、application.jsファイルを一番上に移動して、Railsの「構造」を維持することができます。

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

これは動作するはずです:

ビューで

<% content_for(:head) do %> 
    <%= javascript_include_tag 'headers.js' %> 
<% end %> 

および初期に/ assets.rbを追加

Rails.application.config.assets.precompile += %w(headers.js) 
関連する問題