You Don't Need HTML Template

You Don't Need HTML Template

Table of Contents

1. Interpolation
2. Condition
3. Array
4. Object
5. Filters

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 = true

Output

<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.00

License

MIT