webcomponents

template-mini

Install

<link rel="import" href="template-mini/index.html">

Create

<template-mini>
  <p></p>
</template-mini>

Syntax

repeat ```html

* `if`
```html
<template-mini model='{"show": true}'>
  <p if='show'>Hi</p>
</template-mini>

elseif, else ```html

num is one

num is two

num is greater than two


* `data-src` (only for img)
```html
<template-mini>
  <img src='/'> // This will request a image with url `/%7B%7Bimgurl%7D%7D` after page is loaded.
  <img data-src=''> // Template-mini will set attribute `src` from attribute `data-src` if `src` is null.
</template-mini>

Try it online!

scripts

script-before ```html

date:

this.formatDate = function(num) { return new Date(num).toGMTString(); }

* `script-after`
```html
<template-mini>
  <button>sayhi</button>
  <script-after>
    this.querySelector('button').onclick = function() {
      alert('hi');
    }
  </script-after>
</template-mini>

Attention! If you use <script type='text/beforeUpdate'></script>, the script must be last child.

Methods

render ```html

```

online demo

demo

Other Repos

This site is open source. Improve this page.