Rails/Javascript：如何将 Rails 变量注入（非常）简单的 javascript

发布于 2024-12-05 15:30:59 字数 583 浏览 1 评论 0原文

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

所以，在javascript/coffeescript方面，粗略地说是这样的：

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

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

任何建议非常感谢

原文

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)

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 * <%= [email protected]_PRICE_HERE %>)

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.

Any suggestions very appreciated

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别挽留 2024-12-12 15:30:59

如果您使用的是 Rails 3.1，则可以在提供 JavaScript 文件之前利用资产管道对它们进行一些预处理。为此，只需将文件扩展名从: 更改为

items.js.coffee

即可，然后

items.js.coffee.erb

您可以将 ruby 添加到您的 javascript 中，就像在您的视图中使用 <%= %> 标签一样。您可能遇到的唯一问题是，您的 items.js 文件将服务于对应用程序的任何控制器方法的每个请求。因此，最好编写一个辅助方法，仅在初始化实例变量时才返回值

例如在 items_helper.rb

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

编辑中：有关资产管道的更多信息，请参见：

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

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

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

For example in items_helper.rb

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

EDIT: more about assets pipeline here:

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

回复收藏 0 原文

浅黛梨妆こ 2024-12-12 15:30:59

虽然...如果您将 Javascript 文件作为静态资源提供，这可能不是最佳选择。我通常会在 HTML 的 head 部分中放置一个 script 标记以及变量。这样，JS 就不必重建，浏览器缓存也不必失效。例如：

<head>
  <script type="text/javascript">
    var myGlobalVariable = <%= @global_js_variable %>;
  </script>
</head>

虽然这对于将事物保存在单独的命名空间中来说很糟糕，但它确实减少了将新的 Javascript 文件发送到客户端的开销。

只是一个想法。

Although... if you serve up the Javascript files as static assets, this might not be optimal. I typically put a script tag in the head section of the HTML with the variable. That way, the JS doesn't have to be rebuild and the browser cache for it invalidated. E.g.:

<head>
  <script type="text/javascript">
    var myGlobalVariable = <%= @global_js_variable %>;
  </script>
</head>

While this stinks for keeping things in their separate namespaces, it does reduce the overhead of shipping new Javascript files to the client.

Just a thought.

回复收藏 0 原文

独木成林 2024-12-12 15:30:59

使用资产管道根据每个请求使用 ERB 处理 CoffeeScript 文件对于开发来说可能没问题，但它将成为生产中的瓶颈。

在生产中，我使用全局变量或全局变量的特定属性来减少污染。

在页面 ERB 视图的底部：

<script>
  //<![CDATA[
    window.MyApp = window.MyApp || {};
    window.MyApp.itemBasePrice = <%=j @item.base_price.to_json.html_safe %>;
  //]]>
</script>

始终将脚本放在页面的底部（并将样式表放在顶部），因为这会加快页面加载时间。

我强烈建议阅读这篇文章如何在 Rails 视图中安全地引导 JSON。在撰写本文时，Rails 的最新版本在以这种方式引导 JSON 时容易受到 XSS 攻击。如果您只有一个简单的数字，这可能不是问题。但我发现，当人们看到你的代码运行后，他们往往会简单地将其复制/粘贴到更复杂的情况下，而不考虑后果。

或者，如果您的数据有一个自然容器，您可以将其嵌入到数据属性中。

<div id="item" data-base-price="<%=j @item.base_price.to_json.html_safe %>"></div>

在您的 CoffeeScript 中访问它：

console.log $('#item').data('basePrice')

Using the asset pipeline to process your CoffeeScript files with ERB on a per-request basis may be fine for development, but it will be a bottleneck in production.

In production, I use a global variable or a specific property of a global variable to reduce pollution.

At the bottom of the page's ERB view:

<script>
  //<![CDATA[
    window.MyApp = window.MyApp || {};
    window.MyApp.itemBasePrice = <%=j @item.base_price.to_json.html_safe %>;
  //]]>
</script>

Always put scripts at the bottom (and stylesheets at the top) of your page since it leads to faster perceived page load times.

I highly recommend reading this article on How to securely bootstrap JSON in a Rails view. The latest version of Rails at the time of this writing is vulnerable to XSS attacks when bootstrapping JSON in this way. If you just have a simple number, it may not be an issue. But I find that after people see your code working, they tend to simply copy/paste it to more complicated situations without thinking about the consequences.

Alternatively, if your data has a natural container, you can embed it in a data attribute.

<div id="item" data-base-price="<%=j @item.base_price.to_json.html_safe %>"></div>

Accessing it in your CoffeeScript:

console.log $('#item').data('basePrice')

回复收藏 0 原文

~没有更多了~

关于作者

望喜

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

Rails/Javascript：如何将 Rails 变量注入（非常）简单的 javascript

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

Rails/Javascript：如何将 Rails 变量注入（非常）简单的 javascript

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。