在 Rails 中将文本文件内容加载到 JavaScript答案

【问题标题】：Load text file contents into JavaScript in Rails在 Rails 中将文本文件内容加载到 JavaScript
【发布时间】：2017-04-22 03:11:42
【问题描述】：

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

【问题讨论】：

是什么阻止您将 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><shape></shape></svg>'，而不是加载像 <img src="shape.svg"> 这样的外部 SVG。

标签： javascript ruby-on-rails svg text sprockets

【解决方案1】：

我们最终为此编写了一个 sprockets 转换器：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`...

【讨论】：