Truyền dữ liệu sang javascript trong Ruby on Rails

Passing dữ liệu từ Rails sang JavaScript không phải là vấn đề mới nhưng vẫn chưa có nhiều bài viết về vấn đề này. Và hôm nay tôi sẽ giới thiệu với các bạn một vài cách để passing data sang JavaScript. Có nhiều cách để pass variables từ Rails application sang JavaScript nhưng trong bài viết này tôi sẽ giới thiệu đến các bạn ba cách sau: sử dụng script tag, sử dụng data attribute và cuối cùng là sử dụng Gon Gem.

1. Sử dụng Script tag với object window

object window trong javascript đại diện cho cửa sổ của trình duyệt. Chúng ta có thể sử dụng object này cả ở views của Rails app lẫn cả ở trên javascript, vì vậy chúng ta có thể tận dụng object window này để truyền dữ liệu từ rails app sang phía javascript. Chúng ta cùng xem ví dụ sau để dễ hiểu hơn

products/index.html.erb

<%= javascript_tag do %>
  window.products-name = "<%= Product.first.name %>";
<% end %>

app/assets/javascripts/products.js
  alert(products-name);

một điểm yếu của việc sử dụng object window là chúng ta không thể truyền object. Nhưng có một mẹo nhỏ để chúng ta khắc phục điểm yếu này là convert object cần truyền thành 1 hash. Như vậy chúng ta có một cách để chúng ta có thể truyền đầy đủ dữ liệu của một object sang javascript bằng window, hơn nữa việc truy xuất dữ liệu ở phía javascript cũng tiện dụng và đơn giản không kém gì sử dụng object.

products/index.html.erb
<%= javascript_tag do %>
  window.products = <%=raw Product.first.to_json %>;
<% end %>

app/assets/javascripts/products.js
  alert(products.name);

2. Sử dụng Data Attribute

Ý tưởng của phương pháp này là gán dữ liệu cần truyền vào attribute data của một thẻ HTML và đọc nó ở phía javascript bằng hàm getAttribute(), hoặc data() với jQuery. Đây là một phương pháp đơn giản nhưng nó có nhược điểm là sinh ra nhiều id của HTML element dẫn đến khó quản lý và có thể gây ra thay đổi cấu trúc HTML của views

products/index.html.erb
<%= content_tag "div", id: "products", data: {products: Product.first.name} do %>
  Loading products...
<% end %>

app/assets/javascripts/products.js
  alert($('#products').data('products'))

3. Sử dụng Gon Gem

khai báo gem

Gemfile
gem 'gon'

chạy bundle install và include gon vào application layout

layouts/application.html.erb
<%= include_gon %>

với phương pháp sử dụng gem gon thì chúng ta có thể truyền dữ liệu trục tiếp từ controller sang javascript mà không cần phải render dữ liệu ở view nữa. Điều này giúp việc truyền dữ liệu an toàn hơn khi chúng ta truyền những thông tin nhạy cảm. ở controller cúng ta khai báo biến và gán giá trị cần truyền

def index
  gon.products = Product.limit(10)
end

và gọi biến ở phía javascript cũng rất đơn giản

alert(gon.products)

Trên đây là toàn bộ bài viết của mình. Cảm ơn mọi người đã theo dõi