---
description: https://viblo.asia/p/jquery-template-XQZGxAAKewA
---

# JQuery-Template (ok)

Đọc thêm: [http://underscorejs.org](http://underscorejs.org/)

#### 1. Ví dụ ví dụ ta có dữ liệu local tại trong trang html đơn giản là

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MRyGkEDu4XlaarkdObK%2F-MRyJSu_dxkqaBu5BKcP%2FScreenshot_2.jpg?alt=media\&token=f4537576-7bdb-4782-a530-931217df2614)

C:\Users\Administrator\Desktop\gulp\index.html

```
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
  <div id="pageContent">
    <h1>film store</h1>
    <div id="filmsContainer"></div>
  </div>
  <script id="filmsTemplate" type="text/x-jQuery-tmpl">
    <div>
	     <h2>${title}</h2>
	     price: ${price}
 		</div>
  </script>
  <script type="text/javascript">
	  // Create an array of films
	  var films = [
	    { 
	    	title: "Interstellar", 
	    	price: 37.79, 
	    },
	    { 
	    	title: "Guardians of the Galaxy ", 
	    	price: 44.99 
	    },
	    { 
	    	title: "	Add to WatchlistJohn Wick", 
	    	price: 4.00 
	    }
	  ];
	  // Render the films using the template
	  $("#filmsTemplate").tmpl(films).appendTo("#filmsContainer");
  </script>
</body>
</html>
```

#### 2. Cách sử dụng các thẻ template

```
${} Thường được sử dụng để chèn dữ liệu trên trang
```

C:\Users\Administrator\Desktop\gulp\index.html

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MRyJWGHRA7B50l4-5YD%2F-MRyMX7JqC5a7NkawEJ6%2FScreenshot_2.jpg?alt=media\&token=d36fcb5d-f5f3-4314-8e4a-07bc6df81123)

```
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
  <div id="pageContent">
    <h1>Film store</h1>
    <div id="filmsContainer"></div>
  </div>
  <script id="filmsTemplate" type="text/x-jQuery-tmpl">
    <div>
     	<p>${films.title}</p>
    	<p>${films.author.name}</p>
 		</div>
  </script>
  <script type="text/javascript">
	  var films={title:'The lord of the rings',author:{name:'J.R.R. Tolkien '}}
	  // Render the films using the template
	  $("#filmsTemplate").tmpl(films).appendTo("#filmsContainer");
  </script>
</body>
</html>
```

Ta có thể sử dụng câu lệnh tương tự .Trong một số trang không phải là html chẳng hạn jsp thì sẽ bị xung đột với ký tự $ cúa thư viện jstl thì câu lênh ${} sẽ không sử dụng được mà phải dùng câu lệnh thay thế $

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MRyMXzBf_TzZ7s2kqTr%2F-MRyMd4s7E4QVtQdPDBk%2FScreenshot_3.jpg?alt=media\&token=203b50c3-d268-49fb-970c-cf36d02109e5)

```
Ta có thể gọi một function trong câu lệnh ${ }
```

C:\Users\Administrator\Desktop\gulp\index.html

```
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
  <div id="pageContent">
    <h1>Film store</h1>
    <div id="filmsContainer"></div>
  </div>
  <script id="filmsTemplate" type="text/x-jQuery-tmpl">
    <div>
     	${concatString(films.title,films.author.name)}
 		</div>
  </script>
  <script type="text/javascript">
  	function concatString(a,b){
  		return a + " " + b;
  	};
	  var films={title:'The lord of the rings',author:{name:'J.R.R. Tolkien '}}
	  // Render the films using the template
	  $("#filmsTemplate").tmpl(films).appendTo("#filmsContainer");
  </script>
</body>
</html>


```

```
{{html}}
```

Dùng để render ra nội dung đã được html,khi sử dung ${} sẽ hiển thị nguyên định dạng nếu có thẻ html thì nó cũng hiện ra cả thẻ html

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MRyMXzBf_TzZ7s2kqTr%2F-MRyhR0UWiOPeJza0rsR%2FScreenshot_4.jpg?alt=media\&token=d4615b43-c31b-4feb-991a-6dc44b3b5047)

```
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
  <div id="pageContent">
    <h1>Film store</h1>
    <div id="filmsContainer"></div>
  </div>
  <script id="filmsTemplate" type="text/x-jQuery-tmpl">
    <div>
        {{html title}}
        price: ${price}
    </div>
  </script>
  <script type="text/javascript">
  var films = [
    { title: "<h2>Interstellar</h2>", price: 37.79, },
    { title: "<h2>Guardians of the Galaxy</h2>", price: 44.99 },
    { title: "<h2>Add to WatchlistJohn Wick</h2>", price: 4.00 }
  ];
  $("#filmsTemplate").tmpl(films).appendTo("#filmsContainer");
  </script>
</body>
</html>
```

```
{{if}} / {{else}}
```

Được sử dụng trong khi cần thực hiện một câu lệnh điều kiện trong template code

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MRyhT8OYHYEemKeeRBw%2F-MRyi9EqvahmN35seoaW%2FScreenshot_5.jpg?alt=media\&token=8a85192b-1baa-47bd-a2bb-d4a831006116)

```
<!DOCTYPE html>
<html lang="en">

<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>

<body>
  <div id="pageContent">
    <h1>Film store</h1>
    <div id="filmsContainer"></div>
  </div>
  <script id="filmsTemplate" type="text/x-jQuery-tmpl">
    <div>
		  {{if price > 40}}
        <h2>${title}</h2>
        <h1 style="color:red;">price: ${price}</h1>
				{{else}}
				<h2>${title}</h2>
		    <h1>price: ${price}</h1>
			{{/if}}
  	</div>
  </script>
  <script type="text/javascript">
  var films = [
    { title: "Interstellar", price: 37.79, },
    { title: "Guardians of the Galaxy", price: 44.99 },
    { title: "Add to WatchlistJohn Wick", price: 4.00 }
  ];
  $("#filmsTemplate").tmpl(films).appendTo("#filmsContainer");
  </script>
</body>

</html>
```

```
{{each}}
```

Được sử dụng để lặp một mảng trong một template

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MRyhT8OYHYEemKeeRBw%2F-MRykLwstUGmzm0Xd5Tu%2FScreenshot_6.jpg?alt=media\&token=e373e0f0-97f4-445e-b1f4-d8637c3a4baf)

```
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
  <div id="pageContent">
    <h1>Film store</h1>
    <div id="filmsContainer"></div>
  </div>
  <script id="filmsTemplate" type="text/x-jQuery-tmpl">
    <div>
			{{each films}}
				<p>${$index + 1} Film: ${films[$index]}</p>
			{{/each}}
  	</div>
  </script>
  <script type="text/javascript">
	  var films = { films: ['Interstellar', 'Guardians of the Galaxy', 'Add to WatchlistJohn Wick'] };
	  $("#filmsTemplate").tmpl(films).appendTo("#filmsContainer");
  </script>
</body>
</html>
```

```
{{tmpl}}
```

Được sử dụng để hiển thị dữ liệu ở template con(sub-tempalte)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MRykOCQA5nEw2Bg622Y%2F-MRylcyUa2p1JtXxDIzb%2FScreenshot_7.jpg?alt=media\&token=47170c60-448a-40c1-9ed2-581801ad18de)

```
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
  <div id="pageContent">
    <h1>Film store</h1>
    <div id="filmsContainer"></div>
  </div>
  <script id='inner' type='text/x-jquery-tmpl'>
	  <p>${$data}</p>
	</script>
	<script id='outer' type='text/x-jquery-tmpl'>
	  <p>My name is ${name} and these are my cats:</p>
	  {{tmpl(cats) '#inner'}}
	</script>
  <script type="text/javascript">
	  var data = { name: 'Dave',cats: ['Mittens', 'Fluffy', 'Bob'] };
	  $("#outer").tmpl(data).appendTo("#filmsContainer");
  </script>
</body>
</html>
```
