Избегайте файлов * .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] 

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

var myImage = assetPath('my_image');

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

Answer 1

Простой способ:

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

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

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

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

Answer 2

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

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

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

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

$.addClass('spinner') 

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

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

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

Пример использования 2 требует больше работы на стороне Javascript, чтобы загрузить файлы JSon, но он открывает очень мощные возможности расширяемости.

Ассемблер обрабатывает оба случая классно.

Answer 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');

Кредиты для this Запись в блоге для публикации версии сценария кофе, из которой я основал свою.