Tránh các tệp * .js.erb bằng cách tạo tất cả các giá trị asset_path

Question

Vì vậy, tôi muốn tránh xử lý các tệp JavaScript bằng ERB để tôi có thể có được đường dẫn nội dung thích hợp cho hình ảnh.

Hiện tại, điều này có vẻ như phương pháp phổ biến:

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

nào, tất nhiên, đòi hỏi tên tập tin được thay đổi để "* .erb" để nó sẽ được xử lý.

Tôi muốn cô lập ERB nhiều hơn một điểm trong dự án của tôi tạo một tệp kê khai đơn lẻ (giả sử "assets.js.erb") tính toán và cung cấp tất cả các đường dẫn nội dung mà JavaScript của tôi cần.

tôi chắc chắn có thể làm điều đó WETly bằng cách giải quyết nó từng trường hợp cụ thể:

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

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

Nhưng, tôi muốn thực sự thay vì chỉ viết một số ERB để recurse qua tất cả các asset_paths.asset_environment.paths tôi và xây dựng một đối tượng lớn đen biểu hiện đối với tôi, vì vậy mà ứng dụng thực tế của tôi JavaScript tự tin có thể gọi:

var myImage = assetPath('my_image');

Bất kỳ ý tưởng về (1) nếu có một cách dễ dàng hơn để làm điều này mà tôi bị mất, hoặc (2) làm thế nào tôi muốn hoàn thành một tìm kiếm của tất cả các poten đối số hợp lệ tial để asset_path?.

Answer 1

Một cách dễ dàng hơn:

1. Lấy tiền tố tài sản trong .js.erb của bạn: <% = Rails.configuration.assets.prefix%>. Nếu cần một đường dẫn tuyệt đối, bạn cũng có thể lấy URL ứng dụng (nó phức tạp hơn để lấy nó từ đường ray, vì vậy bạn chỉ có thể mã hóa nó trong của bạn .js.erb?)

2. Nếu bạn đang làm việc với tài sản biên dịch trước , lấy dấu vân tay của tệp của bạn được lưu trữ trong manifest.yml (tại <% = Rails.configuration.assets.manifest%>). Manifest chứa một danh sách với toàn bộ tài sản của mình và dấu vân tay của mình (documentation)

3. Make assetPath chỉ prepending URL ứng dụng + tiền tố tên hình ảnh của bạn hoặc vân tay

Một bất tiện là bạn phải chỉ định tên hình ảnh đầy đủ (bao gồm phần mở rộng).

Answer 2

Tùy thuộc vào ngữ cảnh của hình ảnh được sử dụng.

Trường hợp sử dụng 1: Hình ảnh được trang trí và cần được hoán đổi động. Ví dụ: Spinner, trong khi dữ liệu đang tải. Trong trường hợp này, tôi đề cập đến trong kịch bản lệnh sass và java của tôi.

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

Sau đó, tôi sẽ hoạt động với các lớp trong tập lệnh java chứ không phải hình ảnh.

$.addClass('spinner') 

Trường hợp sử dụng 2: Hình ảnh là một phần của đối tượng.

Có nhiều trường hợp, khi một hình ảnh thực sự thuộc về một đối tượng. Trong trường hợp này, tôi tạo một tệp json, lưu trữ dữ liệu và tham chiếu hình ảnh như thế này. Sau đó, tôi sử dụng ERB để unwrap các tài liệu tham khảo hình ảnh - my_object.json.erb:

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

Sử dụng trường hợp 2 đòi hỏi làm việc thêm về javascript bên để tải các tập tin json, nhưng nó sẽ mở ra tùy chọn mở rộng rất mạnh mẽ.

Đường dẫn nội dung xử lý cả hai trường hợp nổi tiếng.

Answer 3

Câu hỏi cũ, nhưng có cách hay để thực hiện việc này. Chỉ cần giải thích bối cảnh giải pháp của tôi: Tôi cần hiển thị các điểm đánh dấu trên bản đồ, có các biểu tượng khác nhau có thể dựa trên các biến động JS. Kỳ lạ thay, sử dụng <% = asset_path ('"+ hàm số (raw_value) +"')%> không hoạt động. Sau đó, tôi đã tìm giải pháp dưới đây.

Cụ thể, giải pháp tôi đang sử dụng chỉ có một tệp js.erb lưu trữ giá trị của hình ảnh và tên được lấy dấu vân tay của chúng, có thể nhận được bởi hàm, image_path. Sau đó, tất cả các file JS khác của tôi có thể tự do của asset_path, và kết quả của .erb

Tạo một file images.js.erb trong your_application/app/assets/javascripts với nội dung sau:

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

Yêu cầu tập tin này trong application.js của bạn, đó là bình thường trong thư mục tương tự như trên:

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

Sau đó, bên trong JS mà bạn đã sử dụng <%= asset_path('image.png') %>, bạn sẽ sử dụng thay vì image_path('image.png');

Ghi có vào this bài đăng trên blog để đăng phiên bản tập lệnh Coffee mà tôi đã dựa vào đó.