Handlebars là gì

     

Templating engine đã là một phát minh sáng tạo tuyệt vời – đây là những gì tôi nhận ra lần nữa khi tôi làm việc trong một dự án cá thể với handlebars.js và Express ngay gần đây.

Bạn đang xem: Handlebars là gì


Đặc biệt là gần như website khủng với những bản lĩnh động và những nội dung hoàn toàn có thể rất phức tạp để bảo dưỡng nếu bạn chỉ dẫn đầu viết mã HTML một bí quyết sơ khai .Để xử trí yếu tố này, bạn không cần phải sử dụng đều framework front-end nhằm chia nhỏ mọi thiết bị thành đa số thành phần trả toàn rất có thể tái thực hiện .

Dưới đây là một vài tính năng thực tiễn của handlebars.js, kết hợp với Express.js, siêu thú vị – và khiến cho việc trở nên tân tiến các website trở nên thoải mái hơn hết sức nhiều.


Back-end templating engine là gì?

Tất nhiên, nếu như khách hàng đã biết, bạn hoàn toàn có thể bỏ lỡ phần reviews này và chuyển thẳng cho phần setup thiết lập của công ty chúng tôi .Động cơ đúc phần nhiều được biết đến từ phần đầu xe. Lấy một ví dụ : tay lái, thường được tích hợp với Mustache. Js, cũng trả toàn hoàn toàn có thể được thực hiện trong giao diện bạn dùng. Với những nền tảng back-end thanh tao như Express. Js, các bạn cũng trả toàn rất có thể bước vào thế giới của Node. Js .Một vẻ ngoài như vậy trưng bày một mẫu mang đến sever, chủng loại này cần chứa đầy tài liệu đơn cử cho vận dụng đã hoàn thành xong. Khi người tiêu dùng nhu yếu ớt sever, sever sẽ giải quyết và xử lý và giải pháp xử lý mẫu và điền vào mẫu. Người dùng không dìm thấy bất kỳ điều gì ; anh ta chỉ nhận thấy website đã xong xuôi xong .Do đó, những hiện tượng tạo khuôn chủng loại là ưng ý để sản xuất những website động không phải gửi mặt hàng tấn mã JS cho tất cả những người dùng, vì đó, giao diện người tiêu dùng hoàn toàn hoàn toàn có thể được sử dụng để thực thi những lệnh call API ví dụ điển hình .Tải thống kê đo lường được chuyển lên sever. Hơn nữa, những hiện tượng tạo khuôn mẫu khiến cho việc lớn lên một ứng dụng web rất thuận tiện và năng suất cao. Bạn hoàn toàn hoàn toàn có thể chia nhỏ dại những phần thành đầy đủ thành phần như thể nhiều người đang sử dụng một khung công tác thao tác làm việc front-end như React hoặc Angular .Đủ nguyên do để xem bí quyết tất cả họ hoàn toàn hoàn toàn có thể làm cho đời sống của chính mình thuận tiện hơn với handbars.js .

Hãy thiết đặt handlebars.js đến Express.js

Trước tiên, hãy sinh sản một thư mục mới cho dự án Bất Động Sản của chúng tôi. Sau đó thiết lập những gì rất cần thiết :

npm install -ynpm install express express-handlebarsTrong thư mục size nhìn, chúng tôi tạo thư mục bố cục tổng quan, folder này cũng rất được sử dụng vì những thanh tinh chỉnh và điều khiển và điều khiển và tinh chỉnh nhanh theo mang định. Trong thư mục này, shop chúng tôi tạo main.handlebars – nó đóng vai trò vai trò như một nhân tố trình phủ quanh .Mọi thứ công ty chúng tôi viết trong số ấy sẽ được hiển thị dưới phần lớn tuyến của vận dụng web ở đầu cuối của shop chúng tôi – do đó, nó là lý tưởng nhằm nhúng hồ hết thẻ SEO và thực thi nhập tệp như CSS cùng JS .

Xem thêm: ' Xuyên Tạc Là Gì Vậy Ạ, Nghĩa Của Từ Xuyên Tạc Là Gì Vậy Ạ

Để lại main.handlebars như vậy này:body


Nó có nghĩa là cửa hàng chúng tôi muốn chuyển vào đây tổng thể mã mà lại thanh điều khiển và tinh chỉnh và tinh chỉnh và điều khiển thực sự trưng bày .Cấu trúc tệp ở đầu cuối :

├── app.js├── package-lock.json└── views ├── index.handlebars └── layouts └── main.handlebarsconst express = require(‘express’);const exphbs = require(‘express-handlebars’);const app = express();app.engine(‘handlebars’, exphbs());app.set(‘view engine’, ‘handlebars’);app.get(‘/’, function (req, res) res.render(“index”););app.listen(8080);Hãy thuộc xem tính năng thú vị tiên phong góp tăng trưởng tiện lợi hơn .

Truyền dữ liệu và lặp qua nó

Việc cung cấp dữ liệu trường đoản cú Express cho tay lái thực sự dễ dàng dàng. Hàm render của express-handlebars rước một đối tượng người dùng làm tham số đồ vật hai, chứa toàn bộ dữ liệu mà họ muốn cung cấp.

let names = <"Max", "Tom", "Anna">app.get(‘/’, function (req, res) res.render(“index”, students: names ););Students: #each students this /each

*

Vật liệu cơ bản. Mà lại những đối tượng người sử dụng phức tạp hơn thế thì sao?


Hãy giới thiệu một vài thông tin cụ thể về sv của công ty chúng tôi :

let people = < name: “Max”, age: 21, name: “Tom”, age: 19, name: “Anna”, age: 25> #each students this.name, this.age /each

*

Điều kiện

Trong dự án công trình Bất Động Sản phụ vui miệng hiện trên của tôi, tôi gặp mặt yếu tố là tôi không những muốn hiển thị thứ nào đó trong đk kèm theo đúng – nhưng mà nếu đk kèm theo này là sai, thì sản phẩm khác bắt buộc được hiển thị ở một nơi khác .Vâng, nghe có vẻ như phức tạp, nhưng thực chất không bắt buộc vậy – đây là ví dụ trong trong thực tiễn :

*


Ở phía bên trái và mặt phải, dưới mã JavaScript, bạn sẽ thấy cùng một hộp thông tin – vớ yếu, cả nhì hộp đều phải có cùng dạng hình CSS .Nhưng ngơi nghỉ phía bên trái, hộp vẫn được bo tròn ở những góc bên trên cùng. Nhờ những điều kiện kèm theo trong thanh điều khiển và điều khiển, tôi không đề nghị tạo một nguyên tố duy nhất cho tất cả hai, tuy nhiên hoàn toàn có thể xử lý nó theo cách sau :

Nếu một vài mã nguồn được chuyển để hiển thị, nó sẽ auto được hiển thị bên trên hộp thông tin.Nếu không có mã nguồn nào được chuyển, thì hộp thông tin được hiển thị một mình.Làm cụ nào để giải quyết và xử lý vấn đề với các góc tròn? ngoại trừ ra, trong thiết yếu thành phần vỏ hộp thông tin, nó được khám nghiệm xem mã nguồn để hiển thị có được cung ứng hay không.Trong trường hợp không tồn tại mã nguồn làm sao được chuyển, một lớp CSS khác sẽ tiến hành cấp cho hộp thông tin, lớp này sẽ có tác dụng tròn những góc trên.

Kiểm tra đk cho thực sự – nếu

Do đó, bọn chúng tôi đổi khác app.js một ít ít :

let person = name: “Max”, adult: falseapp.get(‘/’, function (req, res) res.render(“index”, person: person ););#if person.adult person is an adult/if#unless person.adult not an adult ./unlessSự biệt lập giữa ‘’ với ‘’Đây là lỗi thông dụng mà nhiều người mới học ghi đông mắc phải. Nếu như tất cả chúng ta muốn gửi một cái gì đó có ghi đông vào mẫu của mình, vớ cả bọn họ hoàn toàn rất có thể triển khai việc này theo hai bí quyết :

Cung cấp cho nội dung, kế tiếp được hiển thị giữa các thẻ HTML của chúng tôi.Các cấu tạo HTML, cũng rất được hiển thị chủ yếu xác.

Xem thêm: Những Cơ Quan Nào Có Trong Khoang Bụng Chứa Các Cơ Quan, Khoang Bụng Chứa

let nội dung = “I am bold text”app.get(‘/’, function (req, res) res.render(“index”, content: content ););Điều này đã dẫn đến hiển thị bên dưới dạng văn bạn dạng :

*
3 dấu ngoặc nhọn thay vị chỉ 2 sẽ buộc các thanh điều khiển và tinh chỉnh và điều khiển và tinh chỉnh coi ngôn từ là mã HTML vừa lòng lệ :

content :

*

Trong dự án phụ của tôi, tôi đã sử dụng vấn đề đó khi tôi ao ước hiển thị những từ in nghiêng hoặc in đậm cho những tiêu đề của mã cheatsheets.


Cảm ơn các bạn đã đọc!

Tham gia danh mục gửi thư của mình để duy trì liên lạc cùng với tôi

JavaScript bởi tiếng Anh thuần túy

Rất thích nội dung bài viết này? giả dụ vậy, hãy nhấn thêm những nội dung tương tự bằng cách đăng cam kết Kênh YouTube của bọn chúng tôi !