.js.erb VS .js

时间:2009-07-14 20:10:08

标签: javascript jquery ruby-on-rails forms

将rails应用程序的javascript放入.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的代码,但我无法弄明白我的生活。我尝试了一下,我开始在rails中获得一些伪造保护错误,这是另一个问题。

3 个答案:

答案 0 :(得分:51)

当您希望在操作完成时执行javascript时,

.js.erb文件用于控制器操作,例如create。例如,当您想通过ajax提交表单并希望在完成所有操作后显示警告时,您可以将

$('#business_submit').click(...)
你的application.js或* .html.erb中的

,你的create.js.erb可能如下所示:

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

这样,返回浏览器的javascript可以首先由Erb呈现,允许您像在.html.erb模板中一样插入自定义字符串/变量/等。

答案 1 :(得分:14)

如果我可以用我的几分钱给答案做出贡献......

你的问题的答案非常简单:

  • *。js.erb 结尾的文件允许您的文件被解释 通过ruby 。 (所以你可以使用铁轨助手)

  • *。js 结尾的文件是纯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' },
  });
})

N.B。:如果您使用* .js.erb,则还需要&#34; Gon&#34;宝石要通过data from your controller to JS

现在针对您的基本问题&#34;为什么我的javascript代码无法使用&#39;&#34;我无法回答,因为我没有javascript专家,这是另一个故事...; - )

答案 2 :(得分:13)

根据我的观点,拥有js.erb文件的原因是为了获得像something_url路由这样的铁路助手的访问权限。我发现,大多数情况下,这些网址已经嵌入<form>标记或类似的内容中,因此我几乎不需要它。使用.erb处理所有内容也会阻止您积极地缓存javascript。

出于这些原因,我认为最合适的决定是将javascript放在最不显眼的地方:application.js(或其他静态脚本)。特别是对于jQuery,这就是它的目的。

顺便说一句,javascript_auto_include是一个很好的,整洁的插件,用于根据渲染的视图组织你的javascript。您可以考虑这一点,而不是将application.js中的所有内容藏匿起来。

js.erb与js.rjs

这两个中的一个(.erb)实际上是用于从模板生成javascript。这是您在HTML中作为标记包含的内容。另一个(.rjs)是关于控制AJAX响应中的页面内容,并且在进行这样的AJAXy调用之前不会运行。