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>
این نوشته در HTML, برنامه‌نویسی, جاوااسکریپت ارسال و , , برچسب شده است. افزودن پیوند یکتا به علاقه‌مندی‌ها.

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

  1. مریم همتی می‌گوید:

    یا سلام
    من میخوام در این Template یک function بنویسم ک مثلا قیمت یک محصول را در این Template بصورت سه رقم سه رقم جدا کنم.به هر صورتی که مینویسم یا Err میدهد یا Template خالی میآید

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      کار Template Engine این است که فقط محتوای خروجی را ایجاد کند. بنابراین اگر شما می‌خواهید اعداد را سه رقم سه رقم جدا کنید این کار باید پیش از نمایش انجام دهید. یعنی ابتدا عددهای سه رقم جدا شده را در یک متغیر دیگر ذخیره کنید و آن را به Template Engine ارسال کنید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>