Evite los archivos * .js.erb creando todos los valores de asset_path

Question

Por lo tanto, quiero evitar el procesamiento de archivos JavaScript con ERB solo para poder obtener una ruta de recursos adecuada para, por ejemplo, una imagen.

Actualmente, esto parece ser el enfoque populares:

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

cual, por supuesto, requiere el nombre del archivo cambiará a "* .erb", por lo que va a ser procesado.

Prefiero aislar la fealdad de ERB en un punto de mi proyecto al crear un único archivo de manifiesto (por ejemplo, "assets.js.erb") que calcula y pone a disposición todas las rutas de recursos que mi JavaScript necesita.

puedo ciertamente que mojadamente abordándolo caso por caso:

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

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

Pero, yo realmente algo acaba de escribir algunas ERB a recursiva a través de todo mi asset_paths.asset_environment.paths y construir un gran objeto literal manifestar por mí, para que mi aplicación real JavaScript puede llamar con confianza:

var myImage = assetPath('my_image');

Ideas en (1) si hay una manera más fácil de hacer esto que echaba de menos, o (2) cómo iba a lograr una búsqueda de todos los poten argumentos válidos reales al asset_path?.

Answer 1

Una forma más fácil:

1. obtener el prefijo de activos en su .js.erb: <% = Rails.configuration.assets.prefix%>. Si se necesita una ruta absoluta, también puede obtener la URL de la aplicación (es más complicado obtenerla de los rieles, así que puede codificarla en su .js.erb?)

2. Si está trabajando con recursos precompilados , obtenga la huella digital de su archivo que está almacenado en manifest.yml (en <% = Rails.configuration.assets.manifest%>). El manifiesto contiene una lista con todos sus activos y sus respectivas huellas dactilares (documentation)

3. assetPath hacer sólo anteponiendo la URL de la aplicación + prefijo a su nombre de la imagen o huella digital

Un inconveniente es que tienes que especifique el nombre completo de la imagen (incluida la extensión).

Answer 2

Depende del contexto en el que se utiliza esta imagen.

Caso de uso 1: la imagen es decorativa y debe cambiarse dinámicamente. Ejemplo: Spinner, mientras se cargan los datos. En este caso, me refiero a está en mi script sass y java.

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

Entonces operaría con clases en script java y no en imágenes.

$.addClass('spinner') 

Caso de uso 2: La imagen es parte de un objeto.

Hay muchas situaciones en las que una imagen pertenece a un objeto. En este caso, creo un archivo json, que almacena los datos y la referencia de la imagen de esta manera. Luego uso erb a desenvolver la referencia de la imagen - my_object.json.erb:

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

Caso de uso 2 requiere más trabajo por parte Javascript para cargar los archivos JSON, pero se abre muy potentes opciones de extensibilidad.

La cartera de activos maneja ambos casos de manera famosa.

Answer 3

Pregunta anterior, pero hay una buena manera de lograr esto. Solo para explicar el contexto de mi solución: necesito mostrar marcadores en un mapa, que tienen diferentes iconos posibles basados ​​en las variables dinámicas JS. Curiosamente, el uso de <% = asset_path ('"+ somefunction (raw_value) +"')%> no funcionaba. Entonces, he buscado la solución a continuación.

En concreto, la solución que estoy usando tiene solo un archivo js.erb que almacena los valores de las imágenes y sus nombres de huellas dactilares, que se pueden obtener por una función, image_path. Después de eso, todos mis otros archivos JS pueden ser libres de la asset_path y, en consecuencia, de la .erb

Crear un archivo images.js.erb en your_application/app/assets/javascripts con el siguiente contenido:

<% 
    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]; 
}; 

requieren este archivo en su application.js, que normalmente está en el mismo directorio que el anterior:

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

Luego, dentro de la JS que usted ha estado utilizando <%= asset_path('image.png') %>, que va a utilizar en su lugar image_path('image.png');

Créditos a this publicación de blog para publicar una versión de script de Coffee de la que he basado la mía.