JQuery-Template (ok)

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

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

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

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

Previous========== End Backbonejs Php Mysql =============NextLearning JavaScript Design Patterns P.1 (ok)

Last updated 3 years ago

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

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

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

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

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

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

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