Functional Attributes

Functional Attributes are special attributes available in Nijor for normal html tags. They help us to do specific tasks with less code.

n:route

In order to navigate between Nijor routes we use the n:route functional attribute on the anchor tag only. If we use the href attribute instead of n:route , we'll still be able to navigate. But the page will reload and the navigation won't be that smooth. Use href attribute for linking to external website.

<a n:route="/">Index Page</a>  <a href="/">Index Page</a>

n:for

This functional attribute is used to perform loops inside a html tag.

        
            <template>
                <p>Following are the Functional Attributes in Nijor :<p>
                <ul n:for="let x of AllAttributes">
                    <li>{x}</li>
                </ul>
            </template>
            <script>
                let AllAttributes = ['n:route','n:for','n:reload','n:asynLoad'];
            </script>

n:reload

This functional attribute is used with n:for or n:asyncLoad functional attributes.
To use this functional attribute, add this attribute to your desired HTML element and assign a label to it, then use the window.nijor.reload(label) function.

        
            <template>
                <p>Following are the Functional Attributes in Nijor :<p>
                <ul n:for="let x of AllAttributes">
                    <li>{x}</li>
                </ul>
            </template>
            <script>
                let AllAttributes = ['n:route','n:for','n:reload','n:asynLoad'];
            </script>

<template> <input type="text" id="newTodo"> <input type="button" on:click="AddItem()"> <ul n:for="let task of Todos" n:reload="todolist"> <li>{Todos}</li> </ul> </template> <script> let Todos = ['Read a book', 'Learn Nijor']; function AddItem(){ let item = document.getElementById('newTodo').value; Todos.push(item); window.nijor.reload('todolist'); } /* Whenever a new item is added to 'todo', the element(s) whith attribute n:reload="todolist" get reloaded and hence the data within them also gets updated. */ </script>

n:asyncLoad

This functional attribute is used to fetch data from server asynchronously to child elemenents inside a parent element. <template> <div n:asyncLoad="let data = await getData()"> <span>Name : {data.name}<span> <span>Email : {data.email}<span> <span>Phone no : {data.phoneno}<span> </div> </template> <script> async function getData(){ // This function fetches data from server. let response = await fetch('url', { method: 'GET', credentials: 'include' }); return (response.json()); } </script>

n:bind

This functional attribute is used to bind the value of an input tag to a reactive variable . <template> <h1>Hello {{name}}</h1> <input type="text" n:bind="name">  </template>