Избегайте файлов *.js.erb, создавая все значения параметра asset_path

Поэтому я хочу избежать обработки файлов JavaScript с помощью ERB, чтобы я мог получить правильный путь к файлу, скажем, к изображению.

В настоящее время это похоже на популярный подход:

var myImage = "<%= asset_path('my_image') %>";

Что, конечно, требует, чтобы имя файла было изменено на "*.erb", чтобы оно было обработано.

Я бы предпочел изолировать уродство ERB до одной точки моего проекта, создав единый файл манифеста (скажем, "assets.js.erb" ), который вычисляет и предоставляет все пути к ресурсам, которые мне нужны для JavaScript.

Я могу, конечно, сделать это МОЖНО, разрешив его в каждом конкретном случае:

ASSETS =
  "my_image": "<%= asset_path('my_image') %>"

window.assetPath = (path) -> ASSETS[path]

Но я бы предпочел просто написать некоторую ERB, чтобы перезаписать весь мой asset_paths.asset_environment.paths и построить для меня большой манифест для объектного объекта, так что мой реальный JavaScript приложения может уверенно вызвать:

var myImage = assetPath('my_image');

Любые идеи по (1), если есть более простой способ сделать это, который я пропустил, или (2) как я выполнил бы поиск всех возможных аргументов в asset_path?.

ОТВЕТЫ

Ответ 1

Более простой способ:

  • Получите префикс активов в вашем .js.erb: <% = Rails.configuration.assets.prefix% > . Если необходим абсолютный путь, вы также можете получить URL-адрес приложения (сложнее получить его из рельсов, поэтому вы можете просто записать его в свой .js.erb?)

  • Если вы работаете с прекомпилированными активами, получите отпечаток вашего файла, который хранится в manifest.yml (at <% = Rails.configuration.assets.manifest% > ), В манифесте содержится список всех ваших активов и соответствующих отпечатков пальцев (документация)

  • Сделать свойство активом только приложением URL + префикса приложения к имени вашего изображения или отпечатку пальца

Неудобно то, что вы должны указать полное имя изображения (включая расширение).

Ответ 2

Это зависит от контекста использования этого изображения.

Используйте случай 1: изображение является декоративным и должно быть динамически заменено. Пример: Spinner, в то время как данные загружаются. В этом случае я ссылаюсь на мой sass и java script.

.spinner
   background-image: url(image_path("spinner.png"))

Тогда я буду работать с классами в java script, а не с изображениями.

   $.addClass('spinner')

Пример использования 2: Изображение является частью объекта.

Существует много ситуаций, когда изображение действительно принадлежит объекту. В этом случае я создаю json файл, в котором хранятся данные и ссылка на изображение как это. Затем я использую erb для разворачивания ссылки на изображение - my_object.json.erb:

 {
    "icon" : "<%=image_path("icons/my_icon.png")%>",
    "label":"My label",
    "description":"My description"
 }

Использование case 2 требует больше работы с javascript для загрузки json файлов, но открывает очень мощные возможности расширения.

Конвейер активов отлично справляется с обоими случаями.

Ответ 3

Старый вопрос, но есть хороший способ сделать это. Чтобы объяснить контекст моего решения: мне нужно отображать маркеры на карте, которые имеют разные значки, основанные на динамических переменных JS. Как ни странно, использование параметра <% = asset_path ('+ somefunction (raw_value) + "')% > не работает. Затем я искал решение ниже.

Конкретно, решение, которое я использую, имеет только один файл js.erb, в котором хранятся значения изображений и их имена с отпечатками пальцев, которые можно получить функцией, image_path. После этого все мои другие JS файлы могут быть свободны от asset_path и, следовательно, .erb

Создайте файл images.js.erb в your_application/app/assets/javascripts со следующим содержимым:

<%
    imgs = {}
    Dir.chdir("#{Rails.root}/app/assets/images/") do
        imgs = Dir["**"].inject({}) {|h,f| h.merge! f => image_path(f)}
    end
%>

window.image_path = function(name) {
    return <%= imgs.to_json %>[name];
};

Требовать этот файл в application.js, который обычно находится в том же каталоге, что и выше:

//= require ...
//= require ...
//= require images
//= require_tree .

Затем внутри JS, который вы использовали <%= asset_path('image.png') %>, вместо этого вы будете использовать image_path('image.png');

Кредиты на это сообщение в блоге для публикации версии Coffee script, из которой я основал мой.