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

Chia sẻ: Huyết Thiên Thần | Ngày: | Loại File: PDF | Số trang:7

Thêm vào BST

Báo xấu

44
lượt xem 3
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 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 > 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 Gọi thì gọi tên Tạo template handlebars template và hbs để dịch .hbs render ra sang .js ngoài Để 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 *.hbs có 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.js lú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 Ajax chè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 .hbs thì 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. Link Github cho phần 3: https://gitlab.com/nguyenhuucam91/demo-handlebars Link tham khảo document Handlebars: https://handlebarsjs.com/guide/builtin- helpers.html 221