Tìm hiểu về x-template trong JQuery

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

• Cài đặt thông qua npm

        npm install mustache --save

• Cài đặt thông qua bower

        bower install --save mustache

Dưới đây là 1 ví dụ đơn giản để minh họa cho việc sử dụng HTML template

    <div id="target"></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ố:

1. mustache template
2. Đối tượng view mà chứa dữ liệu và mã code cần thiết để render trong HTML.

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 }}

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>

• 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

• 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 1 pound và kết thúc là 1 slash.

        {{#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ị sau null, 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 trong HTML 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