Nhúng HTML code trong Javascript sử dụng handlebars
NHÚNG HTML CODE TRONG JAVASCRIPT
SỬ DỤNG HANDLEBARS
Nguyễn Hữu Cầm
Trường Đại học Hà Nội
Abstract: Trong quá trình phát triển website, sẽ có một số bài toán yêu cầu chèn/thay thế
HTML code vào DOM tree sử dụng Javascript/Jquery. Việc nhúng HTML code vào Javascript
không đúng cách sẽ làm cho code sẽ rất dài và rối mắt, gây khó khăn cho vấn đề bảo trì. Vì thế
sử dụng Handlebars để tách phần HTML ra khỏi code Javascript/Jquery là điều cần thiết, giúp
cho code dễ bảo trì và mở rộng hơn.
Từ khoá: Handlebars, Javascript
A.Giới thiệu
Việc nhúng HTML code vào javascript là 1 vấn đề nan giải với các developers, do
HTML thường dài. Việc nhúng cả 1 đoạn HTML sẽ làm cho code Javascript trở nên rối
mắt và khó đọc cũng như khó bảo trì code khi mở rộng và maintain sau này. Một số bài
toán có liên quan đến vấn đề nhùng HTML có thể kể đến : Thêm DOMelement khi ajax
load thành công hoặc thất bại, hoặc khi setup HTMLtemplate và đẩy vào body ngay từ
ban đầu
Ví dụ với 1 đoạn code sau
Figure 41: Khối HTML được chèn vào trong file javascript (vạch đỏ)
Việc viết như thế này rối mắt và vấn đề sửa trong file HTML này khá mất thời
gian, đồng thời làm cho file Javácripttrở nên dài nếu như có 2-3 đoạn như vậy cùng
tồn tại trong file Javascript
B.Cách tiến hành
6) 1. Giới thiệu về Handlebars
Để giải quyết vấn đề trên, Handlebarsra đời. Handlebarslà một template
engine được kế thừa và phát huy tính năng của Mustache.
215
Handlebars có các ưu điểm như
Tách biệt HTML code ra khỏi code JS, giúp cho việc maintain trở nên dễ dàng
Đẩy data vào handlebars template cũng dễ dàng, tạo điều kiện thuận lợi để thực
hiện 1 số phép tính toán logic như loop với {{#each}},điều kiện {{#if}}
Thực thi hiển thị escaped tags như <a></a> <br/>sử dụng {{{ … }}}
2. Cài đặt
Để cài đặt và sử dụng Handlebars, trước hết tạo Handlebarstemplate, kết
thúc bằng .hbsnhư sau
> npm i handlebars
Figure 42: Cài đặt handlebars
Sau đó tạo template handlebars, kết thúc bằng hbs
Figure 43: Tạo template handlebars
Để tối ưu vấn đề load trang sử dụng Handlebars, thay vì biên dịch trong lúc chạy
thì sẽ biên dịch TRƯỚC lúc chạy để sinh ra 1 file javascript, tạm gọi là template.js
. Sau đó sẽ sử dụng chính file js này để gọi template ra file javascript bên ngoài. Toàn
bộ quá trình được mô tả như sau
216
Cần template
thì gọi tên
template và
render ra
ngoài
Gọi
Tạo template
handlebars
để dịch .hbs
sang .js
hbs
Để biên dịch template hbs sang js, cần câu lệnh như sau để thêm vào
package.json
Figure 44: Câu lệnh cần chạy để thêm vào package.json (vạch đỏ)
Ở đây sẽ tiến hành dịch tất cả các file *.hbscó trong thư mục templates sang 1 file js
duy nhất có tên là templates.js
Cách chạy
Figure 45: Chạy command
Đầu tiên cần copy template .hbs từ node_modules vào directory local của mình
qua câu lệnh
cp./node_modules/handlebars/dist/handlebars.runtime.min.js
./handlebars.runtime.min.js
217
sau đó tiến hành dịch template đó sang js bằng việc chạy lệnh npm run
compile:hbs
3. Triển khai
Kết quả thu được
Figure 46: Template được compiled
Sau đó tiến hành nhúng file JS này cùng vời file handlebars.runtime.jslúc nãy
đã copy về để tiến hành chạy template.
Figure 47: Nạp file runner và template
Kết quả thu được
Figure 48: Kết quả
218
4. Làm việc với 1 số operator trong hbs template
Như đã đề cập ở trên, gía trị vẫn có thể đẩy vào template được, và vẫn sử dụng 1
số operators như if-else, loop
Figure 49: Truyền data vào template thông qua {} trong ()
Sau khi truyền xong ở template cần viết lại như sau
Figure 50: Hbs template
Mỗi lần sau khi chỉnh sửa xong template .hbs, cần recompile lại template bằng
npm run compile:hbs.
219
Figure 51: Output
5. Sử dụng với Jquery Ajax
Cách sử dụng với Jquery Ajax cũng tương tự như cách dùng ở trên, như sau
Figure 52: Ajax request
Do DOMđã được load ở dòng 46 ở trên, nên vẫn dùng Ajaxchèn content như bình
thường
220
Figure 53: File hbs đã được cập nhật
Cần chú ý sau khi thay đổi nội dung file .hbsthì cần compile lại hbs đó bằng
npm run compile:hbs
C.Kết luận
Viết HTML trong Javascript là một vấn đề luôn được chú trọng trong vấn đề phát
triển website. Vì thế, việc ứng dụng Handlebars vào trong Javascript / Jquery giúp cho
code Javascript được sạch sẽ và dễ bảo trì hơn.
221
7 trang
10/05/2022
7080
Bạn đang xem tài liệu "Nhúng HTML code trong Javascript sử dụng handlebars", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- nhung_html_code_trong_javascript_su_dung_handlebars.pdf
