[Rails] Cách sử dụng cells để tối ưu code
Rails
30
cells
1
Male avatar

rockkhuya viết ngày 28/07/2015

Link gốc : Việt on Rails

cells là gì

Khi làm việc với view của Rails, không ngày nào mà không sử dụng tới method partial. Tuy nhiên, partial chỉ là 1 tính năng để gộp và tái sử dụng code view nhiều lần mà thôi. Khi muốn gộp chung cả logic vào để tạo ra template thì vấn đề sẽ rất phức tạp.

Khi gặp vấn đề này, cells sẽ phát huy tối đa sức mạnh của mình.

cells là 1 gem được sử dụng để gộp cả view lẫn controller lại thành 1 package, với những view có logic phức tạp, thì cells sẽ giúp code trở nên dễ đọc và dễ dàng tái sử dụng hơn.

những trường hợp dùng cells

  • hiển thị popup login
  • hiển thị ranking ở side menu
  • ...

Ví dụ với popup login

Khi sử dụng partial, ta thường viết như sau :

- unless user_signed_in?
  .header
    .header__login-button
      = link_to 'login', 'javascript:void(0);'
= render partial: 'popup_login'

popup_login.html.haml

- unless user_signed_in?
  .popup-login
    = form_for(@user, url:user_session_path) do |f|
      %dl
        %dt= f.label :email
        %dd= f.email_field :email
        %dt= f.label :password
        %dd= f.password_field :password
      = f.submit 'Login'
   :javascript
     $('.header__login-button a').click(function(){
       $('.popup-login').css({ 'display' : 'block'});
     });

Vấn đề của cách viết này là trong _popup_login.html.haml có sử dụng @user, và @user này được tạo ra ở đâu. Nếu trong controller không định nghĩa @user thì đoạn code trên chắc chắn bị lỗi.
Có 2 cách giải quyết ở đây :

  1. định nghĩa @user ở trong tất cả các action có gọi popup_login.
  2. viết trong application controller

Các viết trong application_controller

Viết 1 cách đơn giản như sau :

class ApplicationController < ActionController::Base
  before_action: :pre_load

  def pre_load
    @user = User.new unless current_user.present?
  end
end

Lần này chỉ là popup_login, nên logic còn khá đơn giản. Nếu mọi thứ phức tạp hơn như ranking, comment, ... thì code chắc chắn sẽ không ngắn gọn và dễ hiểu như thế.

Viết bằng cells

dashboard.html.haml

= render_cell :popup_login, :show

Login
Cấu trúc thư mục của cells sẽ như sau :

/app
  /assets
  /cells
     /popup_login
       show.html.haml
     popup_login_cell.rb

Các đoạn mã để thực hiện chức năng popup sẽ như sau :

app/cells/popup_login_cell.rb
class PopupLoginCell < Cell::Rails
  def show
    @user = User.new unless current_user.present?
    render
  end
end
app/cells/popup_login/show.html.haml
- unless user_signed_in?
  .popup-login
    = form_for(@user, url:user_session_path) do |f|
      %dl
        %dt= f.label :email
        %dd= f.email_field :email
        %dt= f.label :password
        %dd= f.password_field :password
      = f.submit 'Login'
   :javascript
     $('.header__login-button a').click(function(){
       $('.popup-login').css({ 'display' : 'block'});
     });

Sử dụng cells

Thêm vào Gemfile

gem 'cells'

cells được cung cấp thông qua generate :

rails generate cell popup_login show -e haml
  create  app/cells/
  create  app/cells/popup_login
  create  app/cells/popup_login_cell.rb
  create  app/cells/popup_login/show.html.haml
  create  test/cells/popup_login_cell.rb

Khi gọi 1 package trong cells :

= render_cell :popup_login, :show, :property => @property_name
# có thể truyền tham số cho các package của cells
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

rockkhuya

2 bài viết.
4 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
9 1
Bài viết này viết về những lưu ý khi viết server API cho app nhằm làm giảm công sức và để công việc trở nên dễ dàng hơn với cả 2 phía. Link gốc : ...
rockkhuya viết hơn 2 năm trước
9 1
Bài viết liên quan
White
21 3
Giao diện lập trình ứng dụng, còn gọi là API (Application Programming Interface) là chương trình cho phép người dùng sử dụng các phương thức của mộ...
chuong2v viết hơn 2 năm trước
21 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
4 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!