Art-template auxiliary functions and subtemplates, art-template Functions

Art-template auxiliary functions and subtemplates, art-template Functions

Front-end use of art-template

Purpose: it is mainly used to process data and optimize performance. Compared with other modular data processing plug-ins, art-template has better processing performance.

No nonsense, Code on

1. Use the basic art-template syntax

<Script src = "template. js"> </script>

// Id is the module name

// All syntaxes are variables in the dual tag {}

<Script id = "template" type = "text/html">

{If films. length = 0 }}
<P> no recommended movies for you </p>
{Else }}
<H1 >{{ title }:{{ films. length }}<Ul>
{Each films as film index }}
<Li>
{Film. name }}
<Del >{{ film. normalPrice }}</del>
<Span >{{ film. nowPrice }}</span>
<Br>
Premiere date: {film. time }}
</Li>
{{/ Each }}
</Ul>
{/If }}

Analog data:

Var data =
{
Title: 'Recommended movies ',
Films:
[
{
Name: 'mekong adput ',
NormalPrice: 40,
NowPrice: 29.9,
Time: '2017-6-6'
},
{
Name: 'back to two ',
NormalPrice: 26,
NowPrice: 13,
Time: '2017-12-12'
},
{
Name: 'Great Wall ',
NormalPrice: 42,
NowPrice: 39.9,
Time: '2017-12-25'
},
{
Name: 'ghost 7 ',
NormalPrice: 80,
NowPrice: 80,
Time: '2017-8-8'
},
{
Name: 'programmer documentary-the growth of Singles' Day ',
NormalPrice: 1000,
NowPrice: 2000,
Time: '2014-20-20'
}
]
}

Obtain the data and submit the data to the template for processing.

Var html = template ('template', data );
Rendering page
Document. body. innerHTML = html

</Script>

 

2. auxiliary functions are actually processing some data.

Price is the name of the auxiliary method. price_data is the data to be processed.

Method: template. helper ('price', function (price_data ){

// Processed content

})

Take the preceding Code as an example to add a $ modifier to the data of film. normalPrice and film. nowPrice.

Template. helper ('price', function (price_data ){

Return '￥' + price_data.toFixed (2)

})

Use '| method name' in the processed data'

<Del >{{ film. normalPrice | price }}</del>
<Span >{{ film. nowPrice | price }}</span>

 

3. Introduce a subtemplate to the template

Not to mention, go to demo

<Script id = "web" type = "text/html">
<A href = "{url }}" >{{ name }}</a>
<Br>
</Script>

<Script id = "book" type = "text/html">

<Br>
<Div >{{ name }}</div>
</Script>

<Script id = "recommend" type = "text/html">

{If items. length = 0 }}
<H1> sorry, no recommended content found {Else }}
<H1 >{{ title }:{{ items. length }}
{Each items as item }}

{If item. type = 'web '}}
{Include 'web' item }}
{Else }}
{Include 'book' item }}// include is used to import the id item of the submodule 'book' to pass the previous data.
{/If }}
{{/ Each }}
{/If }}
</Script>

Submit data again

Var data =
{
Title: 'Recommended books and website ',
Items:
[
{
Type: 'web ',
Name: 'github ',
Url: 'https: // github.com'
},
{
Type: 'book ',
Name: 'ordinary world ',
Url: 'https: // timgsa.baidu.com/timg? Comment'
},
{
Type: 'web ',
Name: 'Google ',
Url: 'https: // google.com'
},
{
Type: 'book ',
Name: 'besieged City ',
Url: 'https: // timgsa.baidu.com/timg? Comment'
},
{
Type: 'book ',
Name: 'Adventures Of tomsaya ',
Url: 'https: // timgsa.baidu.com/timg? Comment'
},
]
}
Var result = template ('referend', data );

Document. body. innerHTML = result;

 

Then the server uses the art-template module and the template engine to implement project modularization... ,

 

Official source code and documentation:

Https://github.com/aui/artTemplate

Syntax:

Https://github.com/aui/artTemplate/wiki/syntax:simple