You Don't Need HTML Template
You Don't Need HTML Template
Table of Contents
Interpolation
HTML Template
<div>{{first}} {{last}}</div>ES2015
const str = `<div>${first} ${last}</div>`Data
const first = 'Jim'
const last = 'Green'Output
<div>Jim Green</div>Condition
HTML Template
<div>
{{if condition}}
<div>Something</div>
{{else}}
<div>Other</div>
{{/if}}
</div>ES2015
const str = `
<div>
${condition ?
`<div>Something</div>` :
`<div>Other</div>`
}
</div>
`Data
const condition = trueOutput
<div>
<div>Something</div>
</div>Array
HTML Template
<ul>
{{each lists}}
<li>{{user}} is {{age}} years old.</li>
{{/each}}
</ul>ES2015
const str = `
<ul>
${lists.map((item) => {
return `<li>${item.user} is ${item.age} years old.</li>`
}).join('')}
</ul>
`Data
const lists = [
{
user: 'Lee',
age: 16
},
{
user: 'Jim',
age: 18
}
]Output
<ul>
<li>Lee is 16 years old.</li><li>Jim is 18 years old.</li>
</ul>Object
HTML Template
<ul>
{{each obj}}
<li>{{$key}}: {{$value}}</li>
{{/each}}
</ul>ES2015
const str = `
<ul>
${Object.keys(obj).map((key) => {
return `<li>${key}: ${obj[key]}</li>`
}).join('')}
</ul>
`Data
const obj = {
user: 'Lee',
age: 16
}Output
<ul>
<li>user: Lee</li><li>age: 16</li>
</ul>Filters
HTML Template
{{100 | currency}}ES2015
Just JavaScript function.
const currency = x => x.toFixed(2)
const str = `${currency(100)}`Output
100.00License
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent