web-dev-qa-db-ja.com

.js.erb VS .js

Railsアプリのjavascriptをapplication.jsファイルに単に投げるのではなく、.js.erbファイルに入れることの利点は何ですか？ビジネス向けの作成ボタンがあるので、コードをcreate.js.erbファイルに配置するか、次を使用して私のapplication.jsに配置します。

$("#business_submit").click(function() {}

余談ですが、作成ボタンがあります。

    $('.error').hide();
$("#business_submit").click(function() {
    // validate and process form here

    $('.error').hide();
    var name = $("input#business_name").val();
    if (name == ""  || name == "Required Field") {
        $('#namelabel').show()
        $("#business_name").focus();
        return false;
    }
    var address = $("#business_address").val();
    if (address == ""  || address == "Required Field") {
        $('#addresslabel').show();
        $("#business_address").focus();
        return false;
    }
    var city = $("#business_city").val();
    if (city == "" || city == "Required Field") {
        $('#citylabel').show();
        $('#business_city').focus();
        return false;
    }
    var state = $("#business_state").val();
    if (state == ""  || state == "Required Field") {
        $('#statelabel').show();
        $("#business_state").focus();
        return false;
    }
    var Zip = $("#business_Zip").val();
    if (Zip == ""  || Zip == "Required Field") {
        $('#ziplabel').show();
        $("#business_Zip").focus();
        return false;
    }
    var phone = $("#business_phone").val();
    if (phone == ""  || phone == "Required Field") {
        $('#phonelabel').show();
        $("#business_phone").focus();
        return false;
    }

     var category = $("#business_business_category_id").val();
    if (category == " - Choose one - ") {
        $('#categorylabel').show();
        $("#business_business_category_id").focus();
        return false;
    }
    $("#new_business")[0].reset();
    $("#new_business").toggle();
   return false;
});

これは私の.jsファイルでうまく機能しますが、[作成]をクリックしても、フォームに入力した情報が実際にはデータベースに送信されません。そこで、コードを.js.erbファイルにコピーして貼り付けてみました。これで、[作成]をクリックするとフォームがデータベースに送信されますが、JavaScriptの半分が機能していません。 $（ '。error'）。hide（）;私のエラーを隠しておらず、それらはすべて関係なく表示されています。 $（ "＃new_business"）[0] .reset（）;フォームがリセットされていません。また、[作成]をクリックしても検証チェックはありません。だから私は提出しない完全に機能するフォーム、または提出するが実際には機能しないフォームを持っています。どちらを試してみればよいですか？

$ .ajaxを使用したコードがたくさんありますが、私の人生の中でそれを理解することはできません。私は少し試しましたが、Rails）で偽造防止エラーが発生し始めました。これはまったく別の問題です。

javascriptjqueryruby-on-railsforms
36
Mike

.js.erbファイルは、アクションの完了時にJavaScriptを実行する場合の、作成などのコントローラーアクション用です。たとえば、ajaxを介してフォームを送信し、すべてが完了したときにアラートを表示したい場合は、

$('#business_submit').click(...)

application.jsまたは* .html.erbでは、create.js.erbは次のようになります。

alert('New object id: ' + <%= new_object.id %>);

このようにして、ブラウザーに返されるJavaScriptを最初にErbでレンダリングし、.html.erbテンプレートの場合と同じようにカスタム文字列/変数などを挿入できます。

51
erik

私が数セントで答えに貢献できるとしたら...

あなたの質問への答えは本当に簡単です：

  • *。js.erbで終わるファイルは、ファイルをRubyで解釈できるようにします。 （したがって、Railsヘルパーを使用できるようになります）

  • *。jsで終わるファイルは、pure javascriptです。

次のようなRubyコードを内部に配置した場合、*。jsファイルが機能することはありません。

$(function () {
  new Highcharts.Chart({
    chart: { renderTo: 'orders_chart' },
    title: { text: <%= gon.my_title_of_the_day.to_json %> },
  });
})

一部 <%= gon.my_title_of_the_day.to_json %>は、javascriptがRubyについて何も知らないため、エラーを生成します。

* .jsファイルを機能させるには、日が変わるたびに静的に変更する必要があります。

$(function () {
  new Highcharts.Chart({
    chart: { renderTo: 'orders_chart' },
    title: { text: 'Monday' },
  });
})

NB：* .js.erbを使用する場合は、さらに " Gon "を渡すためのgemが必要です JSへのコントローラー ですが。

今、あなたの根底にある質問「なぜ私のJavaScriptコードが機能しないのか」について、私はJavaScriptの専門家ではないので答えられません。これはまた別の話です;-)

14
Douglas

私の見解では、js.erbファイルを用意する理由は、something_urlルートのようなRailsヘルパーにアクセスするためです。ほとんどの場合、これらのURLははすでに<form>タグなどに埋め込まれているため、ほとんど必要ありません。すべてを.erbで処理すると、JavaScriptを積極的にキャッシュすることもできなくなります。

これらの理由から、最も適切な決定は、javascriptを可能な限り目立たない場所、application.js（または他の静的スクリプト）に置くことだと思います。特にjQueryの場合、それは意図したとおりです。

ちなみに、 javascript_auto_include は、レンダリングされるビューに従ってJavaScriptを整理するためのすてきな整頓プラグインです。すべてをapplication.jsに格納するのではなく、これを検討することができます。

js.erbとjs.rjs

これら2つのうち1つ（.erb）は、実際にはテンプレートからJavaScriptを生成するためのものです。これは、HTMLのタグとして含めるようなものです。もう1つ（.rjs）は、AJAX応答でページコンテンツを制御するためのものであり、そのようなAJAXy呼び出しが行われるまで実行されません。

13
Andres Jaan Tack