Nhóm lồng nhau bởi javascript
Chào mọi người, bài viblo của mình hôm nay sẽ nói về Nested Attributes và Nested Form cách sử dụng gem cocoon Giới thiệu về Nested AttributesTrước khi nói về các thuộc tính lồng nhau và biểu mẫu lồng nhau, chúng ta cần xem xét các vấn đề sau Giả sử chúng ta dự án có chức năng đăng ký người dùng. Trong bảng cơ sở dữ liệu sẽ có bảng Người dùng có tên trường, địa chỉ, tuổi Khi đăng ký người dùng mới, chúng ta chỉ có thể lưu 1 bản ghi tên, địa chỉ, tuổi với người đó thôi đúng k? Nếu người dùng muốn thêm nhiều địa chỉ thì sao? Thì có 1 cách thêm nhiều địa chỉ vào trường add user nhưng như thế sẽ rất khó lấy ra save vì quá nhiều thuộc tính vào 1 cột Còn 1 cách khác nữa là thêm nhiều địa chỉ trường nhưng như thế sẽ là mã cứng, muốn thêm địa chỉ thì phải thêm 1 trường khác trong cơ sở dữ liệu Cách cuối cùng, cũng là cách ổn định và khả thi nhất, đó là tách bảng Người dùng ra thành 2 bảng khác nhau Như hình ở trên, chúng ta đã tách ra và có 2 bảng là Người dùng và bảng Hồ sơ Để thêm đc địa chỉ vào bảng profile thì có rất nhiều cách trong đó có thuộc tính lồng nhau là cách ổn định nhất Với các thuộc tính lồng nhau, chúng ta có thể lưu đồng thời dữ liệu ở bảng user và bảng profile trong cùng 1 biểu mẫu mà không cần thêm nhiều biểu mẫu khác nhau Mình sẽ demo bên dưới để các bạn có thêm về ví dụ sử dụng các thuộc tính lồng nhau Đồng nghĩa với việc người dùng sẽ có nhiều địa chỉ Khi tạo người dùng mới, nó sẽ thực hiện câu lệnh sql để chèn người dùng mới vào cơ sở dữ liệu Và nó cũng sẽ chèn 2 bản ghi mới vào bảng hồ sơ, với địa chỉ là "Hà Nội" và "Hồ Chí Minh" như chúng tôi đã nhập Đầu tiên, chúng ta cần tách thành 2 bảng User và Profile Sau đó, để 2 bảng này có thể liên kết với nhau, chúng ta sẽ sử dụng Association
Để bảng người dùng có thể lồng các thuộc tính bảng hồ sơ thì chúng ta cần phải sử dụng câu lệnh này
VD
in which. profile là tên liên kết, allow_destroy. đúng, từ chối_if. . all_blank is the option of it Allow_destroy. đúng nghĩa là cho phép xóa bản ghi con, ở đây là xóa các địa chỉ từ người dùng đó, reject_if. all_bank, nếu các trường Địa chỉ bị trống thì nó sẽ không lưu bản ghi đó vào cơ sở dữ liệu Ngoài ra, chúng ta có thể từ chối nếu chỉ định tên các thuộc tính khác nhau
VD. reject_if. tiến hành {. thuộc tính. thuộc tính['địa chỉ']. trống? Sau đó qua phần điều khiển đền
Tiếp theo chúng ta qua phần điều khiển, hành động mới. Chúng tôi khai báo người dùng. Hồ sơ. mới để có thể khởi tạo 1 đối tượng người dùng mới nhưng chưa lưu vào cơ sở dữ liệu Khởi tạo càng nhiều đối tượng hồ sơ mới thì càng có nhiều trường để chúng ta điền vào, xây dựng hồ sơ 2 lần thì có 2 hồ sơ đối tượng mới, =>2 địa chỉ trường tạo hành động. lưu người dùng mới vào cơ sở dữ liệu, ở đây cần lưu các thông số truyền vào người dùng Khi tạo, cập nhật đối tượng người dùng, chúng ta đồng thời có thể tạo, cập nhật luôn hồ sơ đối tượng bằng cách truyền thuộc tính của hồ sơ vào thông số của người dùng Chúng ta có profile_attributes. [. địa chỉ,. _hủy hoại] Slide before have said về allow_destroy. đúng, để có thể xóa các thuộc tính lồng nhau chúng ta phải có _destroy trong thông số của hồ sơ thì mới hoạt động dc,. address is params to save the address into database
Sau khi đã cấu hình đầy đủ về các thuộc tính lồng nhau Chúng ta phải thiết lập biểu mẫu để có thể lưu nhiều địa chỉ của 1 người dùng vào cơ sở dữ liệu Ở đây chúng ta sử dụng field_for để lưu địa chỉ field_for giống như 1 cái biểu mẫu của hồ sơ được sử dụng để nhập nhiều địa chỉ khác nhau mà chúng ta muốn. hồ sơ là tên hiệp hội address is field has in table profile Nhược điểm và giải quyếtTuy các thuộc tính lồng nhau có rất nhiều lợi ích nhưng nó cũng có những nhược điểm như là nó không hoạt động? Giả sử người dùng muốn thêm nhiều địa chỉ hơn số trường mình đã định sẵn thì sao? . Người dùng không thể thêm 1 trường địa chỉ khác, không cần tải lại trang trên trình duyệt mà phải dựa vào mã người ra trang web đó Để giải quyết vấn đề đó, chúng ta sẽ sử dụng Nested Form với Cocoon Nhưng trước khi sử dụng Cocoon, tôi muốn bạn xem nguyên lí hoạt động của Cocoon nhờ vào việc sử dụng Nested Form sử dụng Javascript thuần túy Biểu mẫu lồng nhau sử dụng Javascript thuần túyĐể hiểu rõ về mẫu lồng nhau mời bạn xem ví dụ dưới đây Ở đây có 1 nút là Thêm địa chỉ, bạn có thêm địa chỉ trường khác ngay trên trình duyệt mà không phải tải lại trang Nguyên lí hoạt động của nested form là nó sẽ thêm 1 cái form vào bên trong nút Add Address, khi người dùng click vào, nó sẽ nối cái form đó ra trình duyệt nhờ sử dụng javascript Triển khai
Vẫn sử dụng các thuộc tính lồng nhau, chúng ta sẽ chỉnh sửa lại 1 chút như hình trên Trong trường đó sẽ tải vào dữ liệu, trong trường truyền vào phương thức sub_address_field (dữ liệu chính là thuộc tính Dữ liệu trong javascript, nó sẽ giúp bạn lưu thêm thông tin vào thẻ html) Nó sẽ truyền vào dữ liệu để có thể sử dụng trong javascript Ứng dụng/người trợ giúp/application_helper. rb
Trong phương thức sub_address_field sub_address, start profile of form. đối tượng với đối số là biểu mẫu (ở đây f chính của @user chúng ta truyền vào biểu mẫu) hình thức. fields_for,tạo ra 1 cái thuộc tính dạng lồng nhau như bình thường con_index. chính là chỉ mục của các biểu mẫu lồng nhau, cần nó để id và tên không bị trùng lặp, nếu bị trùng lặp thì sẽ không thể tạo dc các nội dung khác nhau Tiếp theo, chúng ta sẽ tạo 1 file javascript với nội dung như sau ứng dụng/nội dung/javascript/thuộc tính lồng nhau. js ________số 8Khi nhấp vào phần tử với id là trường con Nó sẽ lấy dữ liệu của cái này, cái này ở đây chính được gọi tới trường con id dữ liệu ở đây là trường chúng ta nói ở hình ảnh trước new_id, get current time Câu lệnh bên dưới, sẽ thêm vào trường trong lớp sub_address. Nghĩa là nó sẽ nối thêm 1 cái từ bên trong trường và nối vào lớp sub_address
|