将文本文件内容加载到 Rails 中的 JavaScript

Question

我有一个 SVG 文件，我想在我的 Rails 应用程序中通过 JavaScript 动态加载内联文件。我需要内联加载 SVG，以便可以对其应用 CSS fill 属性。

我不想通过 AJAX 加载 SVG 文件，以避免在 SVG 可见之前出现潜在延迟。

理想情况下，我想告诉 Rails，在我的 app/assets/icons/ 目录中，我有图标 calendar.svg 和 phone.svg，并且 Rails（Sprockets？）应该获取这些 SVG 文件的内容并将它们设置为 JavaScript 对象 SVG 中的字符串值，以便我可以在我的 JavaScript 代码中访问它们像这样：

var view = {
  render: function () {
    this.element.innerHTML = SVG['app/assets/icons/calendar.svg'];
  }
};

最好，该解决方案不仅仅适用于 SVG，而且我可能会通过 JS 以文本格式加载任何数据，例如TEXT['app/assets/icons/calendar.svg'] 甚至 TEXT['app/assets/etc/some-text-file.text'].

在 Rails 中有什么方法可以做到这一点吗？

Answer 1

我们最终为此编写了链轮变压器：https://github.com/cloversites/js-text-rails

$ bundle install js-text-rails

需要您的文件，例如在 app/assets/javascripts/application.js:

//= require_tree ../images/icons

其中 app/assets/images/icons 包含文件 envelope.svg。

应用程序 JavaScript 代码中的任意位置，通过全局 SVG 变量访问文本文件内容：

var envelopeIcon = SVG['icons/envelope'];
// Do something with `envelopeIcon`...

将文本文件内容加载到 Rails 中的 JavaScript

Load text file contents into JavaScript in Rails

javascript

svg

text

ruby-on-rails

sprockets