Tôi nhận ra rằng tôi đến bữa tiệc này hơi muộn, nhưng tôi muốn đưa ra một giải pháp mà tôi đã sử dụng gần đây. Tuy nhiên, hãy để tôi đề cập đầu tiên ...
Đường ray 3.1 / 3.2 (Không, thưa ngài. Tôi không thích nó.)
Xem: http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
Tôi bao gồm những điều sau đây vì mục đích hoàn chỉnh trong câu trả lời này và bởi vì đó không phải là một giải pháp không thể thực hiện được ... mặc dù tôi không quan tâm nhiều đến nó.
"Rails Way" là một giải pháp hướng đến bộ điều khiển, thay vì hướng theo quan điểm như tác giả ban đầu của câu hỏi này được yêu cầu. Có các tệp JS dành riêng cho bộ điều khiển được đặt tên theo các bộ điều khiển tương ứng của chúng. Tất cả các tệp này được đặt trong cây thư mục KHÔNG được bao gồm theo mặc định trong bất kỳ tệp application.js nào yêu cầu chỉ thị.
Để bao gồm mã dành riêng cho bộ điều khiển, phần sau đây được thêm vào dạng xem.
<%= javascript_include_tag params[:controller] %>
Tôi ghét giải pháp này, nhưng nó ở đó và nó nhanh chóng. Có lẽ, thay vào đó, bạn có thể gọi các tệp này một cái gì đó như "people-index.js" và "people-show.js" và sau đó sử dụng một cái gì đó như "#{params[:controller]}-index"để có được một giải pháp hướng theo quan điểm. Một lần nữa, sửa chữa nhanh chóng, nhưng nó không phù hợp với tôi.
Cách thuộc tính dữ liệu của tôi
Gọi tôi là điên, nhưng tôi muốn TẤT CẢ các JS của tôi được biên dịch và rút gọn thành application.js khi tôi triển khai. Tôi không muốn phải nhớ bao gồm các tệp straggler nhỏ này ở mọi nơi.
Tôi tải tất cả các mã JS của tôi trong một tệp nhỏ gọn, sắp có trong bộ nhớ cache của trình duyệt. Nếu một phần nhất định trong application.js của tôi cần được kích hoạt trên một trang, tôi sẽ để HTML cho tôi biết, không phải Rails.
Thay vì khóa JS của tôi vào ID phần tử cụ thể hoặc xả HTML của tôi bằng các lớp đánh dấu, tôi sử dụng một thuộc tính dữ liệu tùy chỉnh được gọi data-jstags.
<input name="search" data-jstag="auto-suggest hint" />
Trên mỗi trang, tôi sử dụng - chèn phương thức thư viện JS ưa thích vào đây - để chạy mã khi DOM tải xong. Mã bootstrapping này thực hiện các hành động sau:
- Lặp lại tất cả các thành phần trong DOM được đánh dấu bằng
data-jstag
- Đối với mỗi phần tử, phân chia giá trị thuộc tính trên không gian, tạo một chuỗi các chuỗi thẻ.
- Đối với mỗi chuỗi thẻ, hãy thực hiện tra cứu trong Hash cho thẻ đó.
- Nếu tìm thấy khóa khớp, hãy chạy hàm được liên kết với nó, truyền phần tử làm tham số.
Vì vậy, giả sử tôi có các định nghĩa sau ở đâu đó trong application.js của mình:
function my_autosuggest_init(element) {
/* Add events to watch input and make suggestions... */
}
function my_hint_init(element) {
/* Add events to show a hint on change/blur when blank... */
/* Yes, I know HTML 5 can do this natively with attributes. */
}
var JSTags = {
'auto-suggest': my_autosuggest_init,
'hint': my_hint_init
};
Sự kiện bootstrapping sẽ áp dụng các chức năng my_autosuggest_initvà my_hint_initchức năng đối với đầu vào tìm kiếm, biến nó thành đầu vào hiển thị danh sách các đề xuất trong khi người dùng nhập, cũng như cung cấp một số loại gợi ý đầu vào khi đầu vào bị bỏ trống và không tập trung.
Trừ khi một số yếu tố được gắn thẻ data-jstag="auto-suggest", mã tự động đề xuất không bao giờ kích hoạt. Tuy nhiên, nó luôn ở đó, được thu nhỏ và cuối cùng được lưu trữ trong application.js của tôi cho những lần tôi cần nó trên một trang.
Nếu bạn cần chuyển các tham số bổ sung cho các hàm JS được gắn thẻ của mình, bạn sẽ phải áp dụng một số sáng tạo. Hoặc thêm các thuộc tính paramter dữ liệu, đưa ra một số loại cú pháp tham số hoặc thậm chí sử dụng một cách tiếp cận lai.
Ngay cả khi tôi có một số quy trình công việc phức tạp có vẻ đặc trưng cho bộ điều khiển, tôi sẽ chỉ tạo một tệp cho nó trong thư mục lib của mình, đóng gói nó vào application.js và gắn thẻ nó với một cái gì đó như 'new-thing-wizard'. Khi bootstrap của tôi chạm vào thẻ đó, trình hướng dẫn ưa thích, đẹp mắt của tôi sẽ được khởi tạo và chạy. Nó chạy cho (các) chế độ xem của bộ điều khiển đó khi cần, nhưng không được kết hợp với bộ điều khiển. Trong thực tế, nếu tôi mã đúng trình hướng dẫn của mình, tôi có thể cung cấp tất cả dữ liệu cấu hình trong chế độ xem và do đó có thể sử dụng lại trình hướng dẫn của mình sau này cho bất kỳ trình điều khiển nào khác cần.
Dù sao, đây là cách tôi đã triển khai JS cụ thể của trang bây giờ và nó đã phục vụ tốt cho tôi cả cho các thiết kế trang web đơn giản và cho các ứng dụng phức tạp / phong phú hơn. Hy vọng rằng một trong hai giải pháp tôi đã trình bày ở đây, theo cách của tôi hoặc theo cách của Rails, sẽ hữu ích cho bất kỳ ai gặp phải câu hỏi này trong tương lai.