如何在Rails中从application.js访问yml文件？

Question

我有一个yml文件，需要在application.js文件的scripts中使用key。但是我无法从脚本中访问它。请帮助我。我在initializer中有以下几行代码：

APP_CONFIG = YAML.load_file("#{Rails.root}/config/filename.yml")[Rails.env]

我有一个yml文件，其中包含以下键：

development:
  key1: 782364764527225794828437
  key2: sdjfbjs7e834284383984729
  key3: 73465365egfrf36462874727

我访问application.js文件中的键是通过

APP_CONFIG['key1']

但似乎什么也没有发生。但是当我将同样的东西打印在视图正文中时，

<%= APP_CONFIG['key1'] %>

然后它返回 key1 的值。

我该如何访问 application.js 文件中的值。在视图本身的脚本主体中也不起作用。

- logesh

Answer 1

在Javascript文件中无法执行ruby命令

你需要找到其他方法来加载application.js的值

比如在app/views/layouts/application.html.erb中将它们初始化为全局变量

<script>
  var key = '<%= APP_CONFIG['key1'] %>';
</script>

并在任何JavaScript文件中使用它

 window.onload=function(){ alert(key);};

- Siva

---

但是我不希望在查看页面源代码时暴露我的密钥。我该如何防止其被显示？ - logesh

JavaScript 在客户端执行。如果您想要防止执行，则需要在 Rails 中执行这些操作并仅提供结果。 - Siva

Answer 2

你不能直接从JS文件访问yml文件内容。你可以在视图页面上将这些键分配给一个js变量，然后就可以在JS工作中使用它们。

<script>
  var appConfigKeys = “<%= j APP_CONFIG.to_json.html_safe %>”;
  console.log(appConfigKeys);
</script>

如果您希望在其他JS文件中使用它，则需要借助全局变量。

<script>
  appConfigKeys = “<%= j APP_CONFIG.to_json.html_safe %>”;
  console.log(appConfigKeys);
</script>

上面的解决方案将给你所有的键作为JavaScript哈希。 如果你只需要第一个键，你可以将单个键分配给JS变量。

<script>
  appConfigKey = “<%= APP_CONFIG['key1'] %>”;
  console.log(appConfigKey);
</script>

- Kalpesh Fulpagare

---

但是我不希望在查看页面源代码时暴露我的密钥。我该如何防止其被显示？ - logesh

如果你使用全局变量，它将被公开。你可以使用局部变量来解决这个问题。<script> var appConfigKey = “<%= APP_CONFIG['key1'] %>”; // 这个appConfigKey将在代码作用域中可用，并且不会被暴露给终端用户。 </script> 你可以使用alert或console.log来交叉检查变量的值。 - Kalpesh Fulpagare

变量作用域与此无关，无论您编写什么JS代码，它都将在浏览器中公开并执行。 - Siva

是的，JS代码始终在浏览器中执行。但是这些变量值只为浏览器所知，而不为最终用户所知。全局变量的值可以被最终用户通过浏览器控制台访问。 - Kalpesh Fulpagare

他说：“当我查看页面源代码时，我不想让我的密钥暴露出来。” - Siva

Answer 3

我来到这个问题，因为我需要从JS访问我的Rails本地化YAML，更具体地说是存储在其中的月份数组。我的解决方案是使用ERB创建一些带有我需要的值的HTML，并在父div上设置display:none（在这里使用Bootstrap的d-none类来完成）。

在本地化的YAML中：

en:
  date:
    month_names: [~, January, February, March, April, May, June, July, August, September, October, November, December]

在视图中：

<ul class="d-none" id="months">
  <%= I18n.t('date.month_names').each do |month_name| %>
    <% if month_name.present? %>
      <li><%= month_name %></li>
    <% end %>
  <% end %>
</ul>

在JS文件中：

const months = document.getElementById('months');

- tripleJ