You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
44 lines
1.1 KiB
7 years ago
|
# Rendering from template tag
|
||
|
|
|
||
|
|
Pillar allows rendering components from HTML `<template>` tag. All you need to do is pass template's
|
||
|
|
ID to the register function like so:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
Pillar.register('#my-template', 'super-header');
|
||
|
|
```
|
||
|
|
|
||
|
|
_**Note:** Explicitly specifying tag name is **required** when registering a template._
|
||
|
|
|
||
|
|
### How do I access props?
|
||
|
|
|
||
|
|
Because you're not defining a function when registering template, there's no explicit place to
|
||
|
|
access props. Instead props are passed to the template directly using `{{Mustache}}` syntax.
|
||
|
|
|
||
|
|
So in your HTML you can do:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template id="my-template">
|
||
|
|
<h1>{{text}}</h1>
|
||
|
|
<h3>It's Superpowered!</h3>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
...
|
||
|
|
|
||
|
|
<super-header text="This is not a simple header!"></super-header>
|
||
|
|
```
|
||
|
|
|
||
|
|
### I like to live dangerously and want to use `<script>` tags
|
||
|
|
|
||
|
|
By default `<script>` tags are removed from template before rendering. You can override this
|
||
|
|
behavior by passing `allowScripts` option when registering:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
Pillar.register('#my-template', 'super-header', {
|
||
|
|
allowScripts: true,
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
This will run **_any JS code inside the template._**
|
||
|
|
|
||
|
|
**_Next: [Flags →](./4_FLAGS.html)_**
|