2011-12-15 2 views
16

그래서 ERB를 사용하여 JavaScript 파일을 처리하는 것을 피하기 위해 이미지에 적절한 자산 경로를 얻을 수 있습니다.모든 asset_path 값을 작성하여 * .js.erb 파일 사용하지 말 것.

현재이 인기 접근 방식처럼 보인다 : 물론, 파일 이름이 필요

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

이 있도록 처리 할 것 "* .erb"로 변경.

내 프로젝트에서 ERB 추악함을 한 지점으로 분리하여 JavaScript가 필요로하는 모든 애셋 경로를 계산하고 사용할 수있는 단일 매니페스트 파일 (예 : assets.js.erb)을 만들고 싶습니다. 케이스의 경우-에 의해

나는 확실히 그것을 태클로 WETly을 수행 할 수 있습니다

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

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

을하지만, 난 정말이 아니라 그냥 내 asset_paths.asset_environment.paths의 모든 통해 재귀와 문자 큰 오브젝트를 구축하는 일부 ERB를 써서 내 실제 응용 프로그램 자바 스크립트를 자신있게 부를 수 있도록 나를 위해 명단 :에

var myImage = assetPath('my_image');

어떤 아이디어 (1) 내가 놓친, 또는 (2) 나는 어떻게 달성 할 것이 작업을 수행 할 수있는 쉬운 방법이 있다면 모든 잠재력의 수색 유효한 인수는 asset_path?입니까?

답변

6

쉬운 방법 :

  1. 이 .js.erb의 자산 접두사를 취득 : <퍼센트 = Rails.configuration.assets.prefix %>. 절대 경로가 필요한 경우 응용 프로그램 URL을 얻을 수도 있습니다 (.js.erb에서 코드를 하드 코드 할 수 있으므로 더 복잡합니다.)

  2. 사전 컴파일 된 에셋으로 작업하는 경우 manifest.yml (< % = Rails.configuration.assets.manifest %>)에 저장된 파일의 지문을 가져옵니다. 매니페스트

  3. 당신의 이미지 이름이나 지문에 응용 프로그램 URL + 접두사를 붙이는 만들기 assetPath이

불편한 당신이해야한다는 것입니다 귀하의 모든 자산과 각각의 지문 (documentation)

와 목록이 포함되어 있습니다 전체 이미지 이름을 지정하십시오 (확장자 포함).

+1

하지만 자산을 사전 컴파일하기 때문에 URI에 다이제스트를 추가하는'# asset_path'를 포기할 것입니까? –

+0

좋은 의견, 나는 그것을 고려하여 내 게시물을 편집했습니다. –

1

이 이미지가 사용되는 위치에 따라 다릅니다.

사용 사례 1 : 이미지가 장식적이고 동적으로 바꿔야합니다. 예 : 데이터가로드되는 동안 회 전자. 이 경우, 나는 내 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는 JSON 파일을로드하는 자바 스크립트 측면에 더 많은 작업이 필요합니다,하지만 그것은 매우 강력한 확장 옵션을 엽니 다.

애셋 파이프 라인은 두 경우 모두 유명합니다.

1

이전 질문이지만이를 수행하는 좋은 방법이 있습니다. 내 솔루션의 컨텍스트를 설명하기 위해 : JS 동적 변수를 기반으로 가능한 다양한 아이콘이있는 마커를지도에 표시해야합니다. 이상하게도, < % = asset_path (' "+ somefunction (raw_value) +"') %>를 사용하는 것이 효과적이지 않습니다. 그런 다음 해결책을 찾았습니다.

구체적으로, 사용하고있는 솔루션에는 이미지의 값을 저장하는 하나의 js.erb 파일과 함수로 얻을 수있는 지문 파일 이름이 있습니다 (image_path). 그 후, 내 모든 다른 JS 파일이 결과적으로 .erb

의 다음과 같은 내용으로 your_application/app/assets/javascripts에서 파일 images.js.erb을 만듭니다 asset_path이 없어야하고 있습니다 :

<% 
    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 내부 대신를 사용합니다

신용 : this 내 블로그를 기반으로 커피 스크립트 버전을 게시하기위한 블로그 게시물.

관련 문제