Dot.js Detailed Usage Introduction

Website:
Http://olado.github.io

Dot.js Detailed Usage Introduction

make Method:
{{=}} for INTERPOLATION
{{}} for EVALUATION
{{~}} for array iteration
{{?}} For CONDITIONALS
{{!}} for interpolation with encoding
{{#}} for Compile-time evaluation/includes and partials
{{## #}} for Compile-time defines

call method:
var tmptext = dot.template (template);
tmptext (data source);


example one:

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

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

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

Template:

<script id= "Interpolationtmpl" type= "Text/x-dot-template" >
<div>hi {{=it.name}}!</div>
<div>{{=it.age | | "'}}</div>
</script>

Call Mode:

var datainter = {"Name": "Jake", "Age": 31};
var intertext = dot.template ($ ("#interpolationtmpl"). Text ());
$ ("#interpolation"). HTML (Intertext (datainter));



Example two:

2. For evaluation The in loop
Format:
{{for var key in data {}}
{{= key}}
{{ } }}

Data source: {"name": "Jake", "age": +, "interests": ["basketball", "hockey", "photography"], "contact": {"email": "[email Protected] "," Phone ":" 999999999 "}}

Area: <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 Mode:

var dataeval = {"Name": "Jake", "age": +, "interests": ["basketball", "hockey", "photography"], "contact": {"email": "[ Email protected] "," Phone ":" 999999999 "};
var evaltext = dot.template ($ ("#evaluationtmpl"). Text ());
$ ("#evaluation"). HTML (Evaltext (dataeval));



Example three:

3. For array Iteration arrays
Format:
{{~data.array:value:index}}
...
{{~}}

Data source: {"Array": ["banana", "apple", "Orange"]}

zone Domain: <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 four:

4. {{?}} for conditionals condition
Format:
{{? }} If
{{?? }} else if
{{??}} Else

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

Area: <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>
{{??}}
is {{=it.age}} and still dont have a name?
{{?}}
</script>

Call Mode:

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"). HTML (Encodetext (Dataencode));

Example five:

5. For interpolation with encoding
Data source: {"uri": "Http://bebedo.com/?keywords=Yoga"}

Format:
{{!it.uri}}

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

Template:
<script id= "Encodetmpl" type= "Text/x-dot-template" >
Visit {{!it.uri}} {{!it.html}}
</script>

Call Mode:

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"). HTML (Encodetext (Dataencode));




Example SIX:

6, {{#}} for Compile-time evaluation/includes and Partials
{{# #}} for Compile-time defines

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

Area: <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 Mode:

var Datapart = {"Name": "Jake", "age": +, "html": "<div style= ' background: #f00; height:30px; line-height:30px; ' >html element </div> "};
var Defpart = {"joke": "<div>{{=it.name}} who?</div>"};
var parttext = dot.template ($ ("#parttmpl"). Text (), undefined, defpart);
$ ("#part"). HTML (Parttext (Datapart));

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Dot.js Detailed Usage Introduction