Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript [英] Rails/Javascript: How to inject rails variables into (very) simple javascript

问题描述

我想在 rails 中编写一个非常简单的 javascript 计算器，它将输入字段的数量乘以存储在 rails 变量 (@item.base_price) 中的数字

I want to write up a very simple javascript calculator in rails which multiplies the quantity of an input field by a number stored in a rails variable (@item.base_price)

所以，在 javascript/coffeescript 方面，大致是这样的:

So, on the javascript/coffeescript side of things, it's crudely this:

# app/assets/javascript/items.js.coffee
$ -> 
  $('#item_quantity').change ->
    quantity_val = $(this).val()
    $('#total_amount').html(quantity_val * <%= [e-mail]_PRICE_HERE %>)

我知道如何通过对每个 change() 调用的 ajax 调用来做到这一点，但我认为必须有一种优雅的、希望不引人注意的 rails 方式，它不会每次都访问服务器.

I'm aware of how I can do this via an ajax call on each change() call, but I figure there has to be an elegant, hopefully unobtrusive rails way which doesn't hit the server each time.

非常感谢任何建议

推荐答案

如果您使用的是 rails 3.1，您可以利用资产管道在提供 javascript 文件之前对其进行一些预处理.为此，只需将文件扩展名更改为:

If you are using rails 3.1 you can take advantage of the assets pipeline to do some pre-processing on the javascript files before you serve them up. To do this just change the file extension from:

items.js.coffee

到

items.js.coffee.erb

然后您可以将 ruby​​ 添加到您的 javascript 中，就像在您的视图中使用 <%= %> 标签一样.您可能遇到的唯一问题是您的 items.js 文件将被提供给对您应用程序的任何控制器方法的每个请求.所以最好写一个辅助方法，只有当实例变量被初始化时才会返回值

then you can add ruby to your javascript just like in your view with <%= %> tags. The only gotcha you might run into, is that your items.js file will be served to every request to any of your app's controller methods. So its best to write a helper method that will return the value only if the instance variable is initialized

例如在 items_helper.rb 中

For example in items_helper.rb

def item_price
    if @item
        @item.base_price
    else
        0
    end
end

更多关于资产管道的信息:

more about assets pipeline here:

http://guides.rubyonrails.org/asset_pipeline.html

这篇关于Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！