Star

JavaScript Template

Quick reference

Considering the example below:

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://jsuites.net/v4/jsuites.layout.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.layout.css" type="text/css" />

<div class='row'>
<div class='column p10'>
    <div id='jsuites-template' style='border:1px solid #ccc; padding: 10px;'></div>
</div>
</div>

<script>
jSuites.template(document.getElementById('jsuites-template'), {
    url: "/v4/plugins/products.json",
    template: {
        item: function(data) {
            return `
                <div>
                <div class="row">
                    <div class="column f1 p10 center">
                        <div class="column">
                            <img class="users-large mr1" alt="${data.Description}" src="${data.img}">
                        </div>
                        <div class="column">
                            ${data.Title}
                        </div>
                    </div>
                    <div class="column f1 p6 center" style="align-self: center;">$${data.Price}</div>
                    <div class="column f1 p10 center" style="align-self: center;">
                        <button class="jbutton dark">Add to cart</button>
                    </div>
                </div>
            </div>
            `
        }
    },
    search: true,
    pagination: 5,
    searchPlaceHolder: 'Search a item'
});
</script>
</html>


Methods

Method Description
template.addItem(data,beginOfDataSet);Adds a new item to the element.
@param boolean beginOfDataSet - defines whether the item should be added at the beginning of the data array.
template.appendData(data,pageNumber);Append data to a specific page.
@param array data - elements to be added.
@param Number pageNumber - page number.
template.refresh();Updates and re-renders the element.
template.reload();Reloads the data and changes the pagination to its initial value.
template.removeItem(element);Removes a specific item from the template.
@param DOMElement element - element from the dom tree to be removed.
template.render(pageNumber,forceLoad);Renders data in the element.
@param int pageNumber - initial pagination.
@param boolean forceLoad - for remote data, forces data to be reloaded.
template.renderTemplate();Renders all visual content in the template.
template.search(query);Searches matching elements
@param string query - search term.
template.setData(data);Sets a new data value and re-renders the element.
@param array data - data to load.
template.updatePagination();Updates the pagination according to pageNumber.


Events

Method Description
onloadTrigger a method when component is loaded.
onload(DOMElement element, Object obj) => void
onchangeTrigger a method when pagination is changed.
onchange(DOMElement element, Array data) => void
onsearchTrigger a method when searching.
onsearch(DOMElement element, Object obj, String query) => void
onclickTrigger a method when element is clicked.
on(DOMElement element, Object obj, DOMEvent e) => void


Initialization options

Property Description
url: stringCan be loaded from a external file.
data: mixedData to be rendered.
filter: functionMethod to apply a filter to the data before it is rendered.
(data: Array) => filteredData: Array
pageNumber: numberCurrent page number.
numberOfPages: numberTotal number of pages.
template: object{ template: { item: function } }
(data: Array) => template string
render: functionMethod for rendering html content.
(obj: object) => string
noRecordsFound: stringDisplayed message when data was not found.
containerClass: stringAdd a class to content container.
search: booleanShows a searchable input. Default: null.
searchInput: booleanEnables or disables the searchable input. Default: true.
searchPlaceHolder: stringAdds a placeholder to the search input.
searchValue: stringChanges the value of the search input.
remoteData: booleanAllows remote data search. Default: null.
pagination: numberNumber of items on each page.