# 127: Khái niệm cơ bản về JavaScript Templating - Thủ thuật CSS

Mẫu là một đoạn HTML mà bạn cần đưa vào trang. Thông thường, các mẫu được tạo ở “phía máy chủ” - trong đó chúng có dạng JavaScript đầy đủ và chỉ cần được đưa vào DOM. Nhưng đôi khi điều đó không khả thi hoặc sẽ yêu cầu và phải chạy thêm một vòng đến máy chủ có thể chậm. Trong trường hợp đó, có mẫu ngay trong JavaScript là lý tưởng. Bạn chắc chắn chỉ có thể thực hiện một chút nối chuỗi thêm các bit HTML và dữ liệu với nhau cho đến khi bạn có mẫu bạn cần. Nhưng điều đó có thể không lý tưởng vì nó không tách rời mối quan tâm của dữ liệu và mẫu. Tạo khuôn mẫu JavaScript thực có thể giúp ích ở đây.

Trong video màn hình này, chúng tôi sẽ đề cập đến “lý do” cơ bản của JavaScript tạo khuôn mẫu và sau đó trình bày cụ thể một ví dụ đơn giản về cách nó được thực hiện trong Underscore.js. Sau đó, chúng tôi sẽ đề cập đến một số lựa chọn thay thế khác.

Bản giới thiệu

var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);

Xem Pen% = penName%> của Chris Coyier (@chriscoyier) trên CodePen