Tpl

Tpl

new Tpl(stropt, dataopt)

Source:
Parameters:
Name Type Attributes Description
str string <optional>

htmlString
data object <optional>

the data in template

Members

(static) this.compiler

Source:

new and store an instance of Complier

(static) this.data

Source:

store the template data

(static) this.str

Source:

store the html string

Methods

getAst() → {array}

Source:

Get the ast of Tpl after parsing

Returns:

// The format of ast is:
[
{
type: 'tag',
tag: 'div',
attrs: {
class: 'container'
}
children: [
// text node
{
type: 'text',
text: 'This is a text node'
},
// comment node
{
type: 'note',
note: 'This is a comment node'
}
]
},
{
type: 'tag',
tag: 'p',
children: [
{
type: 'text',
text: 'This is the text inner p element'
}
]
}
]
// It stands for:

This is a text node

This is the text inner p element

Type
array

getDom() → {Array}

Source:

Get the dom array after render

Returns:

// For example:
[

,

]
Type
Array

overrideRender(name, func) → {Tpl}

Source:

Use this method you can override the function of Renderer

Parameters:
Name Type Description
name string

the property of Render
func function

the function
Returns:
Type
Tpl

parse(stropt) → {Tpl}

Source:

The method to parse the html string

Parameters:
Name Type Attributes Default Description
str string <optional>
 this.str
Returns:
Type
Tpl

render(objopt) → {Tpl}

Source:

The method to render the ast

Example
// you can use variable to render html string via "{{}}" and data
var tpl = new Tpl()
 var data = {
     divClass: 'div',
     out: 'outer'
 }
 var htmlString = `
      <div class="{{ divClass }}">
          <p>{{ "inner" }}</p>
      </div>
      <p>{{ out + "p" }}</p>
   `
 var dom = tpl.parse(htmlString).render({ data: data }).getDom()
 //
 // dom is:
 // [
 //  <div class="div">
 //      <p>inner</p>
 //  </div>,
 //  <p>outerp</p>
 // ]
 //
Parameters:
Name Type Attributes Description
obj object <optional>

obj: {
ast: [] // your own ast
data: [] // the template data
}
Returns:
Type
Tpl