Router

Pico Library This library has about 1.8 KBytes

The LemonadeJS router plugin is part of the official libraries and is distributed under the MIT. This controls which component is rendered and append to the page based on the route. This library is part of the PICO Library, which is a very smart and optimized library that does not require any external dependencies.

Documentation

Installation

npm install @lemonadejs/router

Attributes

Attribute Description
Router component
animation?: BooleanEnable the page change animation.
Route element
path: StringRoute to execute this page. This should be a regular expression string.
controller: ComponentComponent name.
url?: StringURL to load a remote template.
preload?: BooleanURL to load a remote template.


Events

Event Description
Router component
onchange?: functionExecute the page changes.
onchange(newPage: Object, oldPage: Object) => void;
Route element
onenter?: functionWhen enters in the page
onenter(page: Object) => void;


Router SPA example

On the following example the pages are created from a local template and the other from a remote template define by the url attribute.

Two-way data binding and router library


Source code

<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src="https://lemonadejs.net/v2/packages/router/index.js"></script>
<script src="https://lemonadejs.net/v2/packages/navbar/index.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/app@1.2.1/app.css" />

<div id='root'></div>
<script>
function Messages () {
    // Create one self for each interaction in the array
    let self = this;

    // Template
    let template = `
        <div class="option">
            <div class="option-image">
                <div class="option-badge solid"></div>
                <img src="/templates/default/img/nouser.png" />
            </div>
            <div class="option-header">
                <div class="option-name">{{self.name}}</div>
                <div class="option-small">{{self.message}}</div>
            </div>
            <div class="option-date prettydate">1 mon ago</div>
        </div>`;

    return lemonade.element(template, self);
}

function Profile(html) {
    let self = this;
    return lemonade.element(html, self);
}

function Compose(html) {
    let self = this;
    return lemonade.element(html, self);
}

function Home() {
    let self = this;

    self.data = [
        {
            name: 'Alexander Foster',
            message: 'Lorem ipsum dolor sit amet, consectetur adipiscing'
        },
        {
            name: 'Alfie Chapman',
            message: 'Lorem ipsum dolor sit amet, consectetur adipiscing'
        },
        {
            name: 'Fabian Byrne',
            message: 'Lorem ipsum dolor sit amet, consectetur adipiscing'
        }
    ];

    let template = `
        <>
            <Navbar>
                <Icon href="/tests/home" icon="menu" />
                <Header title="Inbox"/>
            </Navbar>
            <div class="block-title">Messages</div>
            <div class="options"><Messages @loop="self.data" /></div>
        </>
    `;

    return lemonade.element(template, self, { Messages, Navbar });
}

function App() {
    let self = {};

    // In this example, Profile and Compose templates are loaded from a remote ajax call
    let template = `<>
        <Router animation="true">
            <Route path="/tests/home" controller="Home" />
            <Route path="/tests/profile" controller="Profile" url="/tests/profile/1" />
            <Route path="/tests/compose" controller="Compose" url="/tests/compose/1" />
        </Router>
        <Toolbar>
            <Icon content="inbox" title="Inbox" route="/tests/home" />
            <Icon content="create" title="New message" route="/tests/compose" />
            <Icon content="person" title="Profile" route="/tests/profile" />
        </Toolbar>
    </>`;

    return lemonade.element(template, self, { Router, Toolbar, Home, Profile, Compose });
}

lemonade.render(App, document.getElementById('root'));
</script>
</html>