doT.js یک Template Engine سریع در جاوااسکریپت

استفاده از Templateها در محیط‌های مختلف و زبان‌های مختلف بسیار متداول است. یک Template یا قالب، ساختاری است که در ایجاد محتوای جدید و تکراری به برنامه‌نویسان یاری می‌رساند.
Templateها با اهداف مختلفی توسعه پیدا می‌کنند. در زبان جاوااسکریپت هم ابزارهای مختلفی برای استفاده از Tempaleها ایجاد شده‌اند که یکی از بهترین موارد آن doT.js نام دارد.
در این نوشته به اختصار روش نصب و استفاده از این کتابخانه را بررسی خواهیم کرد.

نصب

نصب این کتابخانه به چند روش امکان‌پذیر است. آسان‌ترین روش، دریافت سورس پروژه از سایت GitHub است.

روش استفاده

ابتدا اسکریپت دانلود شده را در فایل HTML بازگزاری می‌کنیم.

<script src="doT.min.js"></script>

سپس قالب خود را در یک تگ اسکریپت قرار می‌دهیم. برای تعریف قالب از رشته‌ها هم می‌توان کمک گرفت که ممکن است کار را کمی دشوار کند. در صورت استفاده از تگ script نوع داده را طوری مشخص می‌کنیم که توسط مرورگر پردازش نشود:

<script id="mytemplate" type="text/x-dot-template">
	<div id="{{=it.id}}">{{=it.text}}</div>
</script>

در قالب بالا، تعیین کردن صفت id برای تگ اسکریپت به ما کمک می‌کند تا در ادامه بتوانیم محتوای متنی این تگ را به آسانی دریافت کنیم.
عبارت‌هایی که میان دوآکولاد و پس از مساوی قرار گرفته‌اند، متغیرهایی هستند که در هر بار استفاده از Template می‌بایست مقداردهی شوند.
عبارت it حاوی متغیری است که برای ایجاد قالب مورد استفاده قرار می‌گیرد.

کامپایل قالب

پس از تعریف قالب و پیش از استفاده از آن، می‌بایست قالب را به یک تابع جاوااسکریپت تبدیل کنیم تا به سادگی بتوان از آن استفاده کرد. doT.js این امکان را در اختیار شما قرار می‌دهد که در محیط Node.js قالب‌های خود را از پیش کامپایل کنید و در هنگام استفاده، بدون نیاز به doT.js از آن‌ها استفاده کنید.
در این نوشته، کامپایل قالب را نیز در زمان اجرا انجام خواهیم داد.

<script>
	var myTemplate = doT.template( document.getElementById( 'mytemplate' ).text );
</script>

استفاده از قالب

هم‌اکنون می‌توانیم از تابع myTemplate که در مرحله‌ی پیشین کامپایل شد، برای تولید محتوا کمک بگیریم.
مقداری ارسالی به این تابع در متغیر it قرار خواهد گرفت و در قالب می‌توان از آن استفاده نمود:

<script>
	document.getElementById( 'content' ).innerHTML = myTemplate( { "id": 'div-10', "text": 'AMIB' } );
</script>

برای افزودن محتوا به انتهای یک عنصر می‌توان از دستور insertAdjacentHTML کمک گرفت

<script>
	document.getElementById( 'content' ).insertAdjacentHTML(
		'beforeend',
		myTemplate( { "id": 'div-10', "text": 'AMIB' } )
	);
</script>