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

Question

Поэтому я хочу избежать обработки файлов 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?.

Answer 1

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

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

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

3. Сделайте assetPath, просто добавив URL-адрес приложения + префикс к имени изображения или отпечатку пальца.

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

Answer 2

Старый вопрос, но есть хороший способ сделать это. Просто для объяснения контекста моего решения: мне нужно отобразить маркеры на карте, которые имеют различные возможные значки на основе динамических переменных 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, на которой я основал свою.

Answer 3

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

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

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

Тогда я бы работал с классами в сценарии Java, а не изображения.

   $.addClass('spinner')

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

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

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

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

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