tailieunhanh - Nhúng HTML Code trong Javascript sử dụng Handlebars

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. Mời các bạn cùng tham khảo chi tiết nội dung bài viết! | 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 DOM element khi ajax load thành công hoặc thất bại hoặc khi setup HTML template 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ácript trở 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 Handlebars ra đời. Handlebars là 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ư sử dụng 2. Cài đặt Để cài đặt và sử dụng Handlebars trước hết tạo Handlebars template kết thúc bằng .hbs như sau gt 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 .