12/08/2018, 14:24
Chỉ định cụ thể javascript cho từng page
Mặc định rails sẽ load tất cả các file javascript với dòng lệnh sau: / / = require_tree . Nếu không có gí thay đổi thì tất cả code js sẽ load trên tất cả các trang. Tuy nhiên với các kết hợp CSS với Jquery có thể giới hạn javascript được chạy trên 1 trang cụ thể Đặt vấn đề. Tưởng ...
Mặc định rails sẽ load tất cả các file javascript với dòng lệnh sau:
//= require_tree .
Nếu không có gí thay đổi thì tất cả code js sẽ load trên tất cả các trang. Tuy nhiên với các kết hợp CSS với Jquery có thể giới hạn javascript được chạy trên 1 trang cụ thể
Đặt vấn đề. Tưởng tượng có 2 page là: landing và contact,và chỉ trang contact sẽ hiện popup thông báo(alert).
Có 1 cách giải quyết đơn giản là viết như sau trong trang contact:
<% # app/views/page/contact.html.erb %> <h1>Contact</h1> <p>This is the contact page</p> <%= javascript_tag do %> alert("My example alert box."); <% end %>
=> Cách này là không tốt nhé.
Giải pháp:
- Thêm classes vào layout:
<%# app/views/layouts/application.html.erb %> <body class="<%= controller_name %> <%= action_name %>"> <%= yield %> </body>
Kết quả render như sau:
<body class="pages contact"> ... </body>
-Tạo thêm hàm ready cho js
(function ($) { var ready = $.fn.ready; $.fn.ready = function (fn) { if (this.context === undefined) { // The $().ready(fn) case. ready(fn); } else if (this.selector) { ready($.proxy(function(){ $(this.selector, this.context).each(fn); }, this)); } else { ready($.proxy(function(){ $(this).each(fn); }, this)); } } })(jQuery);
Đoạn này kiểm tra xem các class tương ứng vs controller và action hiện tại có xuất hiện trên template không. Nếu có thì mới chạy javascript(bên dưới nè) -Sử dụng thôi:
// app/assets/javascripts/alert.js.coffee $(".pages.contact").ready(function(){ alert "My example alert box." });
OK. Trên đây là 1 cách mình tìm hiểu được, mong được góp ý và chia
