Tìm hiểu về x-template trong JQuery
Bài đăng này đã không được cập nhật trong 8 năm
Khi phát triển các ứng dụng HTML hiện đại, chúng ta thường viết rất nhiều các đoạn mã HTML thông qua việc ghép các thẻ HTML và các dữ liệu động. Dưới đây là 1 ví dụ minh họa cho điều đó.
$.each(messages.reverse(), function(index, message) {
$('#messageList').append(
'<li><span class="list-title">' +
message.userName + '</span>' +
'<abbr class="list-timestamp" title="' +
message.datePosted + '"></abbr>' +
'<p class="list-text">' + message.messageText + '</p></li>');
}
});
Sự gia tăng của các đoạn mã này trong ứng dụng của bạn tạo ra rất nhiều vấn đề. Việc gắn chặt giao diện người dùng và dữ liệu logic khiến cho ứng dụng của bạn khó khăn hơn để phát triển và bảo trì lại sau này.
HTML templates
giải quyết vấn đề này bằng cách tách các định nghĩa giao diện người dùng ra khỏi dữ liệu dẫn đến việc ra đời của 1 vài HTML templates
để giải quyết vấn đề này như: jQuery Templates
, Underscore.js
, Mustache.js
, ... Trong đó Mustache.js
được sử dụng nhiều nhất bởi cú pháp của nó vô cùng đơn giản nhưng cực kỳ mạnh mẽ và render cực nhanh
I. Cài đặt Mustache.js
- Cài đặt thông qua
npm
npm install mustache --save
- Cài đặt thông qua
bower
bower install --save mustache
II. Cách sử dụng
Dưới đây là 1 ví dụ đơn giản để minh họa cho việc sử dụng HTML template
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
<script type="text/javascript">
$(function () {
var template = $('#template').html();
Mustache.parse(template, ['{{', '}}']);
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);
});
</script>
Trong ví dụ trên hàm Mustache.render
có 2 tham số:
mustache template
- Đối tượng
view
mà chứa dữ liệu và mã code cần thiết để render trongHTML
.
III. Templates
mustache template
là 1 chuỗi chứa bất cứ thẻ mustache
nào. Thẻ được khai báo bằng hai dấu ngoặc nhọn lồng nhau {{ variable_name }}
1. Include Templates
Nếu bạn cần 1 phần template động trong trang web tĩnh thì bạn có thể khai báo 1 template trong 1 file HTML tĩnh với cú pháp như sau.
<script id="template" type="x-tmpl-mustache"></script>
2. Variable
- Sử dụng 2 dấu ngoặc nhọn lồng nhau để khai báo 1 biến trong
mustache template
. Ví dụ{{ variable_name }}
- Mặc định tất cả các biến đều được
HTML-escaped
. Nếu bạn muốn loại bỏHTML-escaped
khi render thì dử dụng cú pháp{{{ variable_name }}}
hoặc{{ &variable_name }}
- Hãy xem các ví dụ dưới đây để hiểu thêm nhé.
{
"name": "Chris",
"company": "<b>GitHub</b>"
}
Template
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
* {{&company}}
{{=<% %>=}}
* {{company}}
<%={{ }}=%>
Kết quả
* Chris
*
* <b>GitHub</b>
* <b>GitHub</b>
* <b>GitHub</b>
* {{company}}
- Ký hiệu dấu chấm trong
JavaScript
có thể được dùng để truy cập khóa mà là thuộc tính của đối tượng trong 1 view. View
{
"name": {
"first": "Michael",
"last": "Jackson"
},
"age": "RIP"
}
Template
* {{name.first}} {{name.last}}
* {{age}}
Kết quả
* Michael Jackson
* RIP
3. Sections
Sections
biểu diễn cho 1 khối văn bản tại 1 thời điểm hay tại nhiều thời điểm khác nhau phụ thuộc vào giá trị của khóa trong ngữ cảnh hiện tại.- 1
sections
bắt đầu bằng 1pound
và kết thúc là 1slash
.
{{#variable_name}}
{{/variable_name}}
False Values or Empty Lists
Nếu khóa không tồn tại hoặc tồn tại và có 1 trong các giái trị saunull
,undefined
,false
,0
,NaN
hoặc 1 chuỗi rỗng hoặc 1 danh sách rỗng thìblock
sẽ không được render. View
{
"person": false
}
Template
Shown.
{{#person}}
Never shown!
{{/person}}
Kết quả
Shown.
Comments
Việc comment trongHTML template
rất đơn giản bạn chỉ cần sử dụng dấu than trước tên biến là được
<h1>Today{{! ignore me }}.</h1>
Kết quả
<h1>Today.</h1>
Hy vong bài viết này sẽ giúp bạn có 1 cái nhìn tổng quan về mustache.js
và có thể áp dụng cho các dự án phát triển của mình.
Link tham khảo mustache.js
All rights reserved