{"id":1092,"date":"2012-07-03T00:46:22","date_gmt":"2012-07-03T06:46:22","guid":{"rendered":"http:\/\/bateru.com\/news\/?p=1092"},"modified":"2018-07-02T23:28:03","modified_gmt":"2018-07-03T05:28:03","slug":"dot-js-tutorial","status":"publish","type":"post","link":"https:\/\/bateru.com\/news\/2012\/07\/dot-js-tutorial\/","title":{"rendered":"doT.js Tutorial part 1"},"content":{"rendered":"<h1>doT.js Tutorial: Part 1 of 2 <\/h1>\n<h2>What&#8217;s dot.js? <\/h2>\n<p>\nIt&#8217;s one of the fastest and concise javascript template engine for nodejs and web browsers, created by <a href=\"https:\/\/github.com\/olado\">Laura Doktorova<\/a>, the President &#038; Co-Founder of <a href=\"http:\/\/bebedo.com\/posts\">Bebedo Inc<\/a>.<br \/>\nCheck out dot.js on <a href=\"https:\/\/github.com\/olado\/doT\">Github.com<\/a>.<br \/>\ndot.js works on both the client and server side. But for this tutorial, we&#8217;re only going to be focusing on the client-side.\n<\/p>\n<h2>Why use a template engine?<\/h2>\n<blockquote><p>\n\tThere are many reasons to use a template engine rather than printing your code in a given language. I think overall, the main reasons for this are code consistency and organization. If you have a good separation of your markup from your logic it becomes easier to debug your code, to share your code with collaborators, and allows for more rapid development by streamlining common methods for outputting your markup.\n\t<\/p><\/blockquote>\n<p>\t<a href=\"http:\/\/www.quora.com\/What-are-the-pros-and-cons-of-using-a-template-engine-like-Jade\"><cite>By: Bryce Hamrick<\/cite><\/a>\n<\/p>\n<h2>How to import doT.js<\/h2>\n<p>\nJust include &#8220;doT.js&#8221; using the script tag. Once included, &#8220;<i>doT<\/i>&#8221; will be added to the global namespace.<br \/>\n<code><\/p>\n<pre lang='javascript'><script src=\"https:\/\/raw.github.com\/olado\/doT\/master\/doT.js\"><\/script><\/pre>\n<p><\/code><\/p>\n<h2>Steps for using doT.js<\/h2>\n<ol>\n<li>Create an object literal to store your data. A JSON format is preferred.<br \/>\n\t<code><\/p>\n<pre lang='javascript'>var data = { name: \"David\" };<\/pre>\n<p><\/code>\n\t<\/li>\n<li>Create a template that creates the overall structure and tells where your data will be placed.<br \/>\n\t<code><\/p>\n<pre lang='javascript'>var template = \"Hey <b>{{=it.name}}<\/b>, you own me money.\";<\/pre>\n<p><\/code>\n\t<\/li>\n<li>Generate a template function from the template using doT.template().<br \/>\n\t<code><\/p>\n<pre lang='javascript'>var templateFunction = doT.template( template );<\/pre>\n<p><\/code>\n\t<\/li>\n<li>Generate HTML by providing data to the template function.<br \/>\n\t<code><\/p>\n<pre lang='javascript'>\r\nvar html = templateFunction( data );\r\n<\/pre>\n<p><\/code>\n\t<\/li>\n<\/ol>\n<p>\tFull source:<br \/>\n\t<code><\/p>\n<pre lang='javascript'>\r\nvar data = { name: \"David\" };                                 \/\/ step 1\r\nvar template = \"Hey <b>{{=it.name}}<\/b>, you own me money.\";  \/\/ step 2\r\nvar templateFunction = doT.template( template );              \/\/ step 3\r\nvar html = templateFunction( data );                          \/\/ step 4\r\n\r\n\/\/ result\r\nhtml == \"Hey &lt;b>David&lt;\/b>, you own me money.\";\r\n\t<\/pre>\n<p><\/code>\n<\/p>\n<p>\nLet&#8217;s now examine the function doT.template().<br \/>\n<code><\/p>\n<pre lang='javascript'>doT.template(template, settings, userDefinedDef);<\/pre>\n<p><\/code>\n<\/p>\n<h2>Forming a template<\/h2>\n<p>The content of a template will remain the same, except for the sections that contain javascript encapulated sections (JES). JES look like this. <code>\"{{ }}\"<\/code>.<br \/>\nNote that the data passed to the template function can be reference by the template using the namespace &#8216;it&#8217;.<\/p>\n<p>Example:<br \/>\n<code><\/p>\n<pre lang='javascript'>\r\n\/\/ input\r\nvar data = { thatThingOverThere: \"Bartman\" };\r\nvar template = \"Hey, look over there! It's {{=it.thatThingOverThere}}!\";\r\nvar tempFunc = doT.template(template);\r\nvar html = tempFunc(data);\r\n\r\n\/\/ output\r\nhtml == \"Hey, look over there! It's Bartman!\";\r\n<\/pre>\n<p><\/code><\/p>\n<p>To better understand what&#8217;s going on, let&#8217;s look at the generated source for the tempFunc.<br \/>\n<code><\/p>\n<pre lang='javascript'>\r\n\/\/ source for tempFunc\r\nfunction anonymous(it) {\r\n\tvar out = 'Hey, look over there! It\\'s '+(it.thatThingOverThere)+'!';\r\n\treturn out;\r\n}\r\n<\/pre>\n<p><\/code><\/p>\n<h2>Type of JES<\/h2>\n<p>\nThere two basic type of JES.<br \/>\n<b>Type 1<\/b> requires a returned value.<br \/>\n<code><\/p>\n<pre lang='javascript'>var template = \"{{=it.value}}\";<\/pre>\n<p><\/code><\/p>\n<p><b>Type 2<\/b> allows for javascript statements to be executed.<br \/>\n<code><\/p>\n<pre lang='javascript'>var template = \"{{ var global = {}; }}\";<\/pre>\n<p><\/code><br \/>\nExample:<br \/>\n<code><\/p>\n<pre lang='javascript'>\r\nvar data = { team: \"POWER RANGERS!\"}\r\nvar template = '{{ var chant = \"Go go\"; }}{{= chant + \" \" + it.team}}';\r\nvar tempFunc = doT.template( template );\r\nvar html = tempFunc( data );\r\n\r\n\/\/ result\r\nhtml == \"Go go POWER RANGERS!\";\r\n\r\n\/\/ source for tempFunc\r\nfunction anonymous(it) {\r\n\tvar out=''; \r\n\tvar chant = \"Go go\"; \r\n\tout+=( chant + \" \" + it.team);\r\n\treturn out;\r\n}\r\n<\/pre>\n<p><\/code>\n<\/p>\n<p><iframe style=\"width: 100%; height: 300px\" src=\"https:\/\/jsfiddle.net\/sPgkk\/28\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>doT.js Tutorial: Part 1 of 2 What&#8217;s dot.js? It&#8217;s one of the fastest and concise javascript template engine for nodejs and web browsers, created by Laura Doktorova, the President &#038; Co-Founder of Bebedo Inc. Check out dot.js on Github.com. dot.js works on both the client and server side. But for this tutorial, we&#8217;re only going &hellip; <a href=\"https:\/\/bateru.com\/news\/2012\/07\/dot-js-tutorial\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">doT.js Tutorial part 1<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,10],"tags":[146,16],"class_list":["post-1092","post","type-post","status-publish","format-standard","hentry","category-frontend-tech","category-tutorials","tag-dot-js","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/1092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/comments?post=1092"}],"version-history":[{"count":12,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/1092\/revisions"}],"predecessor-version":[{"id":1597,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/1092\/revisions\/1597"}],"wp:attachment":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/media?parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/categories?post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/tags?post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}