relift-html
Version:
A blazing fast view library that lets you put Javascript Template Literals in HTML
161 lines (116 loc) • 3.23 kB
Markdown
## Directives
[TOC]
Directives are special attribute that start with `r-` that you place in HTML elements as a normal data attribute, ie: `<span r-if="this.x === y">show</span>`. They serve as shorthands to convert to template literals stuff that could be too challenging to write.
```js
// directive
<span r-if="this.index === 5">Show me</span>
// The code above will be converted to
${this.index === 5 ? `<span>Show me</span>` : ``}
// Here's how to iterate over a list of items
<ul>
<li r-for="item in this.items">{item}</li>
</ul>
```
Values can be of any javascript conditional. Values should not be placed in `${...}` or `{...}` inside of the directive. It should be written as normal string.
**DO THIS**: `<span r-if="this.index === 5">show me</span>`
**DON'T DO**: `<span r-if="${this.index === 5}">show me</span>`
### r-if
`r-if` can be used to conditionally add or remove the elements.The same way you would write your conditional in javascript.
`r-else` can also be used to indicate an "else block" for `r-if`. The element must immediately follow the `r-if`, or it will not be recognized.
```
<div id="root">
<div r-if="this.count !== 5">The count is not {this.count}</div>
<div r-if="this.isTrue">Show me</div>
<div r-else> Show me ELSE</div>
</div>
<script type="module">
reLiftHTML({
el: '#root',
data: {
isTrue: true,
count: 5
}
})
</script>
```
---
### r-for
`r-for` can be used to iterate over a list of items. Underneath it will turn it into `map`.
The `r-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data Array and `item` is an alias for the Array element being iterated on.
You can also have `item, index in items`, where `index` is tracking the number.
#### Loop
```
<div id="root">
<ul>
<li r-for="location in this.locations">{location.name}</li>
</ul>
</div>
<script type="module">
reLiftHTML({
el: '#root',
data: {
locations: [
{
name: 'Charlotte'
},
{
name: 'Atlanta'
},
{
name: 'Concord'
}
]
}
})
</script>
```
#### Inner Loop
```
<div id="root">
<ul>
<li r-for="state in this.states">
{state.name}
<ul>
<li>Cities</li>
<li r-for="city in state.cities">{city}</li>
</ul>
</li>
</ul>
</div>
<script type="module">
reLiftHTML({
el: '#root',
data: {
states: [
{
name: 'NC',
cities: [
'Concord',
'Charlotte',
'Raleigh'
]
},
{
name: 'Florida',
cities: [
'Tampa',
'Miami',
'Jacksonville'
]
},
{
name: 'South Carolina',
cities: [
'Columbia',
'Greenville'
]
}
]
}
})
</script>
```
#### Iterate over a range
```
<div r-for="i in [...Array(5).keys()]">I'm {i}</div>
```