.js.erb VS.js

В чем преимущество использования 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. Теперь форма отправляется в базу данных при нажатии кнопки create, но половина javascript не работает. $('. Error'). Hide(); не скрывает мои ошибки, и все они появляются независимо. $( "# New_business" ) [0].RESET(); не переписывает мою форму, и нет никаких проверок проверки при нажатии кнопки create. Поэтому у меня либо есть полностью функциональная форма, которая не подает, либо подает, но не работает. С какой целью я должен работать?

Я вижу много кода с $.ajax, но я не могу понять его жизнь. Я попытался немного, и я начал получать некоторые ошибки защиты от подделки в рельсах, что представляет собой еще одну проблему.

Ответ 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, что позволяет вам вставлять собственные строки/переменные/etc так же, как вы можете в шаблонах .html.erb.

Ответ 2

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

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

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

js.erb versus js.rjs

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

Ответ 3

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

Ответ на ваш вопрос очень прост:

Файл, заканчивающийся на *. 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 "gem для передачи данных с вашего контроллера в JS.

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