すべてのビュー（Ruby on Rails）でCoffeeScript関数を呼び出す

Question

これは私の最初のStackOverflowに関する質問です。

私はRuby on Rails Webアプリケーションを使用しています。私たちのjavascriptファイルでは、id = "submit"のボタンが押されたことを検出し、最初に表示されるエラーがあればそれを検出します（「送信」ボタンが私たちの形で使用されている）：

@scroll_to_error = -> 
 
    document.getElementById('submit').onclick = -> 
 
    \t if $('.alert-danger:visible:first').length > 0 
 
     $('html, body').animate { scrollTop: $('.alert-danger:visible:first').offset().top - 220 }, '1000' 
 
    \t return

それがどんなで呼び出すことができるように私は、configフォルダにある私たちのapplication.rbファイル内のファイルが含まれていますビューセクションのHTMLファイル~~しかし、もしそれがcal私が持っているすべての意見に導かれました。これを行うには特定の方法はありますか？

これは十分です。申し訳ありません私は会社（したがって「私たち」）をコーディングしているので、もっとコードスニペットを提供できませんでした。

Answer 1

このような体験をしてみませんか？

scrollToError = -> 
    $('*[data-scroll-to-error="true"]').click -> 
    alertElement = $('.alert-danger:visible:first') 

    if alertElement.length > 0 
     $('html, body').animate { 
     scrollTop: alertElement.offset().top - 220 
     }, '1000' 

# Run with turbolinks. 
$(document).on 'page:change', scrollToError 

と設定 data-scroll-to-error属性を持つボタンを提出します。

<input type="submit" data-scroll-to-error="true" /> 

私はあなたのこの文は混乱見つける：

それは任意のHTMLファイルで呼び出すことができるように、私は、コンフィグ フォルダ内の私達のapplication.rbファイル内のファイルが含まれていますビューのセクションで

これは標準的なRailsプロジェクトであると仮定して、Coffeescriptコードを含むファイルをassets/javascripts/application.js（マニフェクトestファイル）、そしてapplication.jsはレイアウトに必要なJSファイルです（そうではありませんか？ ： - /）、このコードはすべてのビューで実行されます。私はconfig/application.rbがここにどのように関わっているのかわかりません。

更新：詳細を追加しています。

application.jsファイル（マニフェストファイル）の使用方法が不明な場合は、Railsの公式ドキュメント（特にマニフェストに関するセクション）をご覧ください。あなたのケースでは

http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives

、あなたは含めるapplication.jsを変更することをお勧めします：基本的に

... 
//= require error 
... 

は、あなたがレイアウトを使用するすべてのページと一緒にロードするすべてのアセットファイルを一覧表示します（おそらくapplication.html.erb）、マニフェストファイルのみをレイアウトと記述します。こうすることで、Railsは連結して1つのアセットファイルを生成することができます。デフォルトのapplication.マニフェストファイルは自動的にプリコンパイルされているので、手動で新しいアセットをプリコンパイルリストに追加する必要はありません。

私がセレクタを*[data-scroll-to-error="true"]と書いた理由は、個人的な好みでした。 ID submitがエラーへのスクロールが必要な要素にのみ適用されていることを確認している場合は、最初のセレクタを$('#submit').click ->に変更してください。

Answer 2

これを行う1つの方法は、コードを関数に公開してビューから呼び出しできるようにすることです。

CoffeeScriptのファイル：

window.SomeNamespace ||= {} 
window.SomeNamespace.scroll_to_error = -> 
    document.getElementById('submit').onclick = -> 
    if $('.alert-danger:visible:first').length > 0 
     $('html, body').animate { scrollTop: $('.alert-danger:visible:first').offset().top - 220 }, '1000' 

ビューファイル：（あなたはERBを使用していると言う）

<script> 
    $(function(){ 
    window.SomeNamespace.scroll_to_error() 
    }); 
</script> 

これを行うには良い方法は、しかし、別のビューのコードにあるとJavaScriptコード。 elementaljsはRails用の小さなJavascriptビヘイビアライブラリを提供しています。 data属性を使用して、特定のhtml要素にjavascriptの動作を「アタッチ」することができます。ライブラリは上記の作業を行います。