在Rails中將文本文件內容加載到JavaScript中

我有一個SVG文件，我想通過JavaScript在我的Rails應用程序中動態加載，內聯。我需要內嵌加載SVG，以便我可以對其應用CSS fill屬性。在Rails中將文本文件內容加載到JavaScript中

我寧願不通過AJAX加載SVG文件，以避免SVG可見之前的潛在滯後。

理想我喜歡做的是告訴的是，在我的app/assets/icons/目錄，我有圖標calendar.svg和phone.svg Rails和Rails所（鏈輪？）應該採取那些SVG文件的內容，並將它們設置爲字符串值在JavaScript對象SVG，這樣我可以訪問他們在我的JavaScript代碼是這樣的：

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

優選地，所述溶液是廣義的不僅僅是SVGs更多，並且經由I可能加載以文本格式的任何數據JS，例如TEXT['app/assets/icons/calendar.svg']或甚至TEXT['app/assets/etc/some-text-file.text']。

有沒有辦法在Rails中做到這一點？

來源

2017-04-12 Jackson

是什麼阻止你把你的視圖模板（如ERB）內SVG的內容是什麼？ – emaillenin

雖然我可以，但是這並不能很好地擴展，因爲如果我的服務器返回的HTML中有很多SVG，瀏覽器將花費更長時間來完成下載HTML並顯示頁面;而如果我在一個網絡請求中加載SVG（可能是我已經做出的JS請求），那麼可以將該加載推遲到頁面上有東西供用戶查看之後。 – Jackson

該問題的另一個答案是，該應用程序是SPA，由於許多體系結構原因，該視圖需要使用JS而不是ERB模板創建。 – Jackson

我們結束了寫一個鏈輪變壓器這樣的：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`...

來源

2017-04-21 19:11:42 Jackson

在Rails中將文本文件內容加載到JavaScript中

回答

相關問題