Detailed analysis of doT. js and dot. js

Detailed analysis of doT. js and dot. js
DoT. js detailed parsing doT. js features fast, small, and no dependency on other plug-ins.

Official Website: http://olado.github.io usage: 1) {{}}for interpolation 2) {{}} for evaluation 3 ){{~ } For array iteration 4 ){{? } For conditionals 5 ){{! } For interpolation with encoding 6) {{#}} for compile-time evaluation/between des and partials 7) {{###}} for compile-time defines

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

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 ));

 

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 ));

 

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 ));

 

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 ));

 

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 ));

 

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 ));