JQuery-Template (ok)
https://viblo.asia/p/jquery-template-XQZGxAAKewA
Previous========== End Backbonejs Php Mysql =============NextLearning JavaScript Design Patterns P.1 (ok)
Last updated
Advanced Javascript
https://viblo.asia/p/jquery-template-XQZGxAAKewA
Last updated
Đọc thêm: http://underscorejs.org
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>${} Thường được sử dụng để chèn dữ liệu trên trangC:\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>
<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ế $
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
<!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
<!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
<!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)
<!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>
