Giới thiệu
Thay vì trước đây ta chỉ quen với việc tạo, update một bản ghi của một đối tượng thì nay ta có thể tạo, update luôn các đối tượng con có liên kết với nhau. Nested Attributes cho phép bạn lưu các thuộc tính của bản ghi của đối tượng thông qua đối tượng cha của nó. Mặc định thì Nested Attributes đã bị tắt nên cần thêm vào model class method #accepts_nested_attributes_for. Ví dụ:
1 2 3 4 5 6 7 | class Book < ActiveRecord::Base has_one :author has_many :pages accepts_nested_attributes_for :author, :pages end |
Thực hành:
Để làm quen nhanh với Nested Attributes thì ta thử tạo một app nhỏ đơn giản
1 2 | rails new demo_app -d mysql |
Tạo 2 model
1 2 3 | rails g scaffold user name:string email:string rails g model address user:references street:string |
chạy rails db:migrate
Ở model User:
1 2 3 4 5 6 | class User < ApplicationRecord has_many :address accepts_nested_attributes_for :address end |
Ở UsersController
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | def new @user = User.new // tạo mới một instance quan hệ liên kết, ta có thể tạo 1 hay nhiều instance cùng một lúc @user.address.build @user.address.build end ... private def user_params // cập nhật strong parameters cho phép tạo User và Address cùng lúc params.require(:user).permit(:name, :email, address_attributes: [:id, :street, :_destroy]) end |
Ở views/users/_form.html.erb ta dùng fields_for
dùng trong Nested Forms
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <%= form_with(model: user, local: true) do |form| %> <div class="field"> <%= form.label :name %> <%= form.text_field :name %> </div> <div class="field"> <%= form.label :email %> <%= form.text_field :email %> </div> <div class="field"> <%= form.fields_for :address do |ff| %> <%= ff.label :street %> <%= ff.text_field :street %> <% end %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> |
Tới đây ta đã xây dựng được một nested forms có thể tạo một đối tượng user và liên kết address của nó cùng một lúc.
Nâng cao hơn tí xíu
Ở trên là hướng dẫn cơ bản để làm quen Nested Attributes và Nested forms. Nhược điểm của form ở trên chỉ là một Static form, ta không thể biết trước User muốn add bao nhiêu Address được nên giờ ta hãy thử tạo 1 Dynamic form cho phép user muốn thêm address thì chỉ cần 1 cú click chuột.
Sửa lại form 1 chút xíu, add thêm class và thêm js, css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <div class="field address-container"> <%= form.label :street %> <%= form.fields_for :address do |ff| %> <%= ff.text_field :street, class: "street-field" %> <% end %> </div> <div class="field"> <button type="button" class="js-btn-add">Add address</button> </div> // thêm js <script type="text/javascript"> $(".js-btn-add").on("click", function() { addAddressField(); }) function addAddressField() { var length = $(".street-field").length; var div = document.createElement("div"); var input = document.createElement("input"); input.type = "text"; input.name = "user[address_attributes]["+ length +"][street]" input.className = "street-field" input.id = "user_address_attributes_" + length + "_street" div.appendChild(input) $(".address-container").append(div); } </script> // thêm css <style type="text/css"> .street-field { margin-top: 5px; margin-bottom: 5px; } </style> |
Sau bước làm trên bạn sẽ có 1 form như thế này. Giờ nó đã trở thành một Dynamic form cho phép bạn có thể tạo thêm nhiều address.
Việc tiếp theo chỉ cần điền thông tin và ấn submit để xem kết quả.
Nguồn:
Trên là những bước cơ bản giúp làm quen nhanh với Nested Attributes. Ngoài ra để kỹ hơn có thể tham khảo thêm ở dưới.
https://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html
http://jyrkis-blogs.blogspot.com/2014/06/adding-fields-on-fly-with-ruby-on-rails.html
https://www.tutorielsenfolie.com/en/tutorials-7-Dynamic-form-in-JavaScript.html