通过构建所有asset_path值来避免使用* .js.erb文件

因此,我希望避免使用ERB处理JavaScript文件,这样我就可以获得适当的资产路径,例如图像。

目前,这似乎是流行的方法:

var myImage = "";

当然,这需要将文件名更改为“* .erb”,以便进行处理。

我更倾向于将ERB丑陋与我项目中的一个点隔离,制作一个清单文件(例如“assets.js.erb”)来计算并提供我需要的所有资产路径。

我当然可以通过逐案解决来做到这一点:

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

但是,我真的只是编写一些ERB来递归我的所有asset_paths.asset_environment.paths并为我构建一个大对象文字清单,这样我真正的应用程序JavaScript就可以自信地调用:

var myImage = assetPath('my_image');

关于(1)是否有更容易的方法来做我错过的任何想法,或者(2)我如何完成对asset_path的所有潜在有效参数的asset_path

更简单的方法:

  1. 获取.js.erb中的资产前缀:<%= Rails.configuration.assets.prefix%>。 如果需要一个绝对路径,你也可以获得应用程序URL(从rails获取它更复杂,所以你可以在.js.erb中对它进行硬编码?)

  2. 如果您正在使用预编译资产,请获取存储在manifest.yml中的文件指纹(位于<%= Rails.configuration.assets.manifest%>)。 清单包含一个列表,其中包含您的所有资产及其各自的指纹( 文档 )

  3. 使assetPath只是将应用程序URL +前缀添加到您的图像名称或指纹

不方便的是,您必须指定完整的图像名称(包括扩展名)。

这取决于使用此图像的上下文。

用例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需要在javascript端进行更多工作来加载json文件,但它会打开非常强大的可扩展性选项。

资产管道处理两个着名的案例。

老问题,但有很好的方法来实现这一目标。 只是为了解释我的解决方案的背景:我需要在地图中显示标记,这些标记具有基于JS动态变量的不同可能图标。 奇怪的是,使用<%= asset_path('“somefunction(raw_value)+”')%>无效。 然后,我已经找到了解决方案。

具体来说,我使用的解决方案只有一个js.erb文件,它存储图像的值,以及它们的指纹名称,可以通过函数image_path 。 在那之后,我所有的其他JS文件都可以没有asset_path ,因此也没有.erb

使用以下内容在your_application/app/assets/javascripts创建文件images.js.erb

 <% 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 . 

然后,在您使用<%= asset_path('image.png') %>的JS中,您将使用image_path('image.png');

这个博客文章的信用点,用于发布我自己的咖啡脚本版本。