.js.erb VS .js

Question

В чем преимущество того, что вы помещаете свой javascript для вашего приложения rails в файл .js.erb, а не просто добавляете его в файл application.js? У меня есть кнопка создания для предприятий, поэтому я должен поместить код в файл 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, но не могу понять это ради своей жизни. Я попытался немного, и я начал получать некоторые ошибки защиты от подделок в рельсах, что является совсем другой проблемой.

Answer 1

.js.erb файлы предназначены для действий контроллера, таких как create, когда вы хотите, чтобы javascript выполнялся после завершения действия. Например, если вы хотите отправить форму через ajax и хотите отобразить предупреждение, когда все будет сделано, вы должны поставить

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

в вашем application.js или * .html.erb, а ваш create.js.erb может выглядеть так:

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

Таким образом, javascript, который возвращается браузеру, может быть сначала обработан Erb, что позволяет вам вставлять пользовательские строки / переменные / и т. Д., Как вы можете в шаблонах .html.erb.

Answer 2

Если я могу поспособствовать ответу с моими несколькими центами ...

Ответ на ваш вопрос действительно прост:

• Файл, заканчивающийся *. Js.erb , позволяет интерпретировать ваш файл по рубину . (Так что вы сможете использовать помощников рельсов)

• Файл, заканчивающийся *. Js , представляет собой чистый javascript .

Вы никогда не получите файл * .js для работы, если вы поместите любой код ruby ​​внутри, например:

$(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 " для передачи данных с вашего контроллера в JS хотя.

Теперь на ваш основной вопрос "почему мой код javascript не работает?" Я не могу ответить, потому что я не эксперт по javascript, и это другая история ...; -)

Answer 3

На мой взгляд, причина наличия файлов js.erb - получить доступ к помощникам рельсов, таким как маршруты something_url. В большинстве случаев я обнаружил, что эти URL-адреса уже встроены в тег <form> или что-то в этом роде, поэтому мне это мало нужно. Обработка всего с помощью .erb также не позволяет агрессивно кэшировать JavaScript.

По этим причинам, я думаю, наиболее подходящее решение - поместить javascript в самое ненавязчивое место: application.js (или другие статические скрипты). Особенно с jQuery, это действительно так, как и было задумано.

Кстати, javascript_auto_include - это красивый, аккуратный плагин для организации вашего javascript в соответствии с отображаемыми представлениями. Вместо того, чтобы хранить все в application.js, вы можете рассмотреть это.

js.erb против js.rjs

Один из этих двух (.erb) действительно предназначен для генерации JavaScript из шаблона. Это та вещь, которую вы бы включили в качестве тега в HTML. Другой (.rjs) касается управления содержимым страницы в ответе AJAX и не будет выполняться до тех пор, пока не будет выполнен такой вызов AJAXy.