Template Builder

SinglightJs has a powerful template builder. Working with this template builder is super-easy

Variables

For show variables you must use {{ ... }} syntax.

<h1>Hello, {{ this.name }}</h1>
<p>{{ this.premium ? "You have premium account" : "You don't have premium account" }}</p>

If

For add conditions, you must use sl-if as a tag attribute

<p sl-if="1 == 1.0">Condition is true!</p>
<p sl-if="this.age >= 18">Condition is true!</p>

And you can use sl-else as else and sl-elif as else if

<p sl-if="this.counter == 0">it's zero</p>
<p sl-elif="this.counter == 5">it's five</p>
<p sl-elif="this.counter == 10">it's ten</p>
<p sl-else>it's not zero or five or ten, it's {{ this.counter }}</p>

Display

Display is same if, difference is that, in if, when condition is false, tag will remove from DOM, but in display, tag will hidden

For add it, use sl-display like sl-if

<p sl-display="1 == 1.0">Condition is true!</p>
<p sl-display="this.age >= 18">Condition is true!</p>

For

For add loops, you must use sl-for as a tag attribute

<ul>
    <li sl-for="item of this.list">{{ this.item }}</li>
</ul>

And you can use key : value syntax for get index of object and value

<ul>
    <li sl-for="number : item of this.list">{{ this.number }} - {{ this.item }}</li>
</ul>

Event (on)

For add a event you must use sl-on as a tag attribute by sl-on="EVENT:CODE" syntax

<button sl-on="click:alert('hi there!')">Show Alert</button>

You can get event with $

<button sl-on="click: alert($.shiftKey ? 'Shift' : 'No Shift')">Show Alert</button>

Style

You can bind style to elements by sl-style

export default class HomePage extends Page {
    h1Styles = {
        color: "royalblue",
        fontFamily: "sans-serif"
    };
    template() {
        return `
            <h1 sl-style="this.h1Styles">Hi there</h1>
        `;
    }
}

Route

For add a route link you must use sl-route as a tag attribute. You have 2 methods to use sl-route

Route URL

It's super-easy! just write url!

<button sl-route="/posts/5/edit">Edit Post 5</button>

Route Name

For this method, you must pass route name and route parameters, by sl-route="_ROUTE-NAME:ROUTE-PARAM1=ROUTE-VALUE1,ROUTE-PARAM2=ROUTE-VALUE2,..." syntax

<button sl-route="_post.edit:id=5">Edit Post 5</button>

Back

For use back, you must use sl-back as a tag attribute without value. It's like this.back helper

<button sl-back>Go Back</button>