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

我有一个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中有什么方法可以做到这一点吗？

我们最终为此编写了一个链轮变压器：

需要您的文件，例如在

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`...

---

是什么阻止您将SVG的内容放入视图模板（例如ERB）？我可以，但这不会很好地扩展，因为如果我从服务器返回的HTML中有很多SVG，浏览器完成下载HTML和显示页面所需的时间会更长；然而，如果我在一个网络请求中加载SVG（可能是我已经必须进行的JS请求），那么加载可以推迟到页面上有东西供用户查看之后。这个问题的另一个答案是，该应用程序是SPA，由于很多架构上的原因，视图需要用JS而不是ERB模板创建。您说的是“内联，通过我的Rails应用程序中的JavaScript”，这意味着在服务器端呈现SVG文件的内容。但是现在你说“SPA”，内容应该在客户端创建。我的Rails应用程序只有一个简单的视图。通过资产管道生成

application.js

文件。这个

application.js

使应用程序成为SPA，因为它动态生成页面的HTML。当我说我想“内联”加载SVG时，我的意思是我想执行

htmlElement.innerHTML='

，而不是像

那样加载外部SVG。

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