Introduction to doT. js and introduction to dot. js

Introduction to doT. js and introduction to dot. js

Official Website:
Http://olado.github.io

DoT. js

Usage:
{{=}For interpolation
{{}} For evaluation
{{~ } For array iteration
{{? } For conditionals
{{! } For interpolation with encoding
{{#}} For compile-time evaluation/between des and partials
{{###}} For compile-time defines

Call method:
Var tmpText = doT. template (template );
TmpText (data source );


Example 1:

 

1. for interpolation assignment
Format:
{{= }}

 

Data source: {"name": "Jake", "age": 31}

Region: <div id = "interpolation"> </div>

 

Template:

<Script id = "interpolationtmpl" type = "text/x-dot-template">
<Div> Hi {{= it. name }}! </Div>
<Div >{{= it. age | ''}}</div>
</Script>

Call method:

Var dataInter = {"name": "Jake", "age": 31 };
Var interText = doT. template ($ ("# interpolationtmpl"). text ());
$ ("# Interpolation" ).html (interText (dataInter ));



Example 2:

2. for evaluation for in Loop
Format:
{For var key in data {}}
{= Key }}
{{}}}

Data source: {"name": "Jake", "age": 31, "interests": ["basketball", "hockey", "photography"], "contact ": {"email": "jake@xyz.com", "phone": "999999999 "}}

Region: <div id = "evaluation"> </div>

Template:

<Script id = "evaluationtmpl" type = "text/x-dot-template">
{For (var prop in it ){}}
<Div> KEY :{{= prop }}--- VALUE :{{= it [prop] }}</div>
{{}}}
</Script>

Call method:

Var dataEval = {"name": "Jake", "age": 31, "interests": ["basketball", "hockey", "photography"], "contact ": {"email": "jake@xyz.com", "phone": "999999999 "}};
Var evalText = doT. template ($ ("# evaluationtmpl"). text ());
$ ("# Evaluation" pai.html (evalText (dataEval ));



Example 3:

3. for array iteration array
Format:
{{~ Data. array: value: index }}
...
{{~}}

Data source: {"array": ["banana", "apple", "orange"]}

Region: <div id = "arrays"> </div>

Template:
<Script id = "arraystmpl" type = "text/x-dot-template">
{{~ It. array: value: index }}
<Div >{{= index + 1 }}{{= value }}! </Div>
{{~}}
</Script>

Call method:

Var dataArr = {"array": ["banana", "apple", "orange"]};
Var arrText = doT. template ($ ("# arraystmpl"). text ());
$ ("# Arrays" ).html (arrText (dataArr ));




Example 4:

4 ,{{? } For conditionals Conditions
Format:
{{? } If
{{?? } Else if
{{??}} Else

Data source: {"name": "Jake", "age": 31}

Region: <div id = "condition"> </div>
Template:
<Script id = "conditionstmpl" type = "text/x-dot-template">
{{? ! It. name }}
<Div> Oh, I love your name, {{= it. name }}! </Div>
{{?? ! It. age === 0 }}
<Div> Guess nobody named you yet! </Div>
{{??}}
You are {= it. age} and still dont have a name?
{{?}}
</Script>

Call method:

Var dataEncode = {"uri": "http://bebedo.com /? Keywords = Yoga "," html ":" <div style = 'background: # f00; height: 30px; line-height: 30px; '> html element </div> "};
Var EncodeText = doT. template ($ ("# encodetmpl"). text ());
$ ("# Encode" pai.html (EncodeText (dataEncode ));

Example 5:

5. for interpolation with encoding
Data source: {"uri": "http://bebedo.com /? Keywords = Yoga "}

Format:
{{! It. uri }}

Region: <div id = "encode"> </div>

Template:
<Script id = "encodetmpl" type = "text/x-dot-template">
Visit {{! It. uri }}{{! It.html }}
</Script>

Call method:

Var dataEncode = {"uri": "http://bebedo.com /? Keywords = Yoga "," html ":" <div style = 'background: # f00; height: 30px; line-height: 30px; '> html element </div> "};
Var EncodeText = doT. template ($ ("# encodetmpl"). text ());
$ ("# Encode" pai.html (EncodeText (dataEncode ));




Example 6:

6. {{#}}for compile-time evaluation/between des and partials
{{###}} For compile-time defines

Data source: {"name": "Jake", "age": 31}

Region: <div id = "part"> </div>

Template:

<Script id = "parttmpl" type = "text/x-dot-template">
{{## Def. snippet:
<Div >{{= it. name }}</div >{{# def. joke }}
#}}
{{# Def. snippet }}
{{=It.html }}
</Script>

Call method:

Var dataPart = {"name": "Jake", "age": 31, "html": "<div style = 'background: # f00; height: 30px; line-height: 30px; '> html elements </div> "};
Var defPart = {"joke": "<div >{{= it. name} who? </Div> "};
Var partText = doT. template ($ ("# parttmpl"). text (), undefined, defPart );
$ ("# Part" pai.html (partText (dataPart ));

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.