12/08/2018, 14:10

Cách hiển thị thời gian cập nhật ( RELATIVE TIMESTAMPS ) trong rails

Trong Rails có 1 helper là: time_ago_in_words . Nếu bạn dùng created_at attribute nó sẽ tự sinh ra thời gian tương đối cho bạn. Posted : < % = time_ago_in_words ( post . created_at ) % > ago Thật tuyệt vời , nhưng chưa đủ!. Chuyện gì xảy ra nếu người dùng xem trang của bạn ...

Trong Rails có 1 helper là: time_ago_in_words . Nếu bạn dùng created_at attribute nó sẽ tự sinh ra thời gian tương đối cho bạn.

Posted: <%= time_ago_in_words(post.created_at) %> ago

Thật tuyệt vời , nhưng chưa đủ!. Chuyện gì xảy ra nếu người dùng xem trang của bạn trong 10 phút trong khi bài post của bạn vẫn hiển thị "1 minute ago". Chắc là phải yêu cầu người dùng refresh lại page thôi.

Có cách để làm điều này.

Giải pháp: Đưa phần chuyển thời gian này về phía client.

  • Sử dụng Timeago.js, nó sẽ chuyển đổi từ time stamp sang thời gian tương đối cho bạn.
  • Timeago.js sẽ tự động refresh lại thời gian sau 10 phút
  • Không liên quan đến server

The Implementation

  1. Download Timeago.js (http://timeago.yarp.com/) rồi bỏ vào vendor/javascripts/timeago.jquery.js
  2. Thêm dòng này vào application.js.
//= require jquery.timeago
  1. Tạo file time.rb
# app/helpers/time.rb
 module TimeHelper
   def timeago(time, options = {})
     options[:class] ||= "timeago"
     content_tag(
       :time,
       time.to_s,
       options.merge(datetime: time.getutc.iso8601)
     ) if time
   end
 end
  1. Sử dụng trong view như sau:
 # app/views/posts/show.html.erb
 Posted: <%= timeago(post.created_at) %>

Nó sẽ tạo tag trông như thế này:

<time class="timeago" datetime="2013-11-08T20:05:37Z"></time>
  1. Thêm đoạn javascript sau vào layout:
# app/views/layouts/application.html.erb
 <body>
   <%= javascript_tag do %>
     $(function() {
       $("time.timeago").timeago();
     });
   <% end %>
 </body>

Khi hàm timeago() được gọi thì thẻ <time> trông như sau :

 <time class="timeago" datetime="2013-11-08T20:05:37Z"
 title="2013-11-08 20:05:37 UTC">2 days ago</time>
  1. OK. Bạn xem page 1 lúc lâu lâu tý là thời gian sẽ tự cập nhật.

Trên đây là 1 cách giải quyết vẫn đề này. Mong mọi người góp ý và cho ý kiến

0