Star

jSuites Template

Event handling

jSuites.template makes it possible to create events in your template in a very simple way. You define the events in the template and create the corresponding event listener in the template object, see an example of friend requests below:



Source code

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/template/template.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jsuites/template/template.min.js"></script>

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

<script>
var template = jSuites.template(document.getElementById('jsuites-template'), {
    url: "/plugins/users.json",
    pagination: 3,
    template: {
        item: function(data,obj) {
            return `
                <div data-index="${data.id}">
                    <div class="row">
                        <div class="column f1 p6 center">
                            <div class="column">
                                <img class="users-large mr1" alt="user" src="${data.picture}">
                            </div>
                            <div class="column f1">
                                ${data.name}
                            </div>
                        </div>
                        <div class="column f1 p10 center">
                            <button onclick="this.accept(e)" class="jbutton dark" style="margin: 15px 0px;" >Accept</button>
                        </div>
                        <div class="column f1 p10 center">
                            <button onclick="this.decline(e)" class="jbutton dark" style="margin: 15px 0px; background: red;">Decline</button>
                        </div>
                    </div>
            </div>
            `
        },
        accept: function(e) {
           alert('friend request accepted');
           var element = e.target.closest('[data-index]');
           if (element) {
               template.removeItem(element);
           }
        },
        decline: function(e) {
            var element = e.target.closest('[data-index]');
            if (element) {
                template.removeItem(element);
            }  
        }
    }
});
</script>
</html>