Web Template Using Just-Click Library - Part 1

Eng Kerollos Adel

1.80/5 (2 votes)

3 Jun 2018CPOL2 min read

5.9K

New JavaScript library, this library makes display of HTML page from template and JavaScript object or object from API or from file easy with filter

Code examples at GitHub

Introduction

There are many libraries to help you in building your app with templates like handlebars but you need to write many lines of code to apply template. In this article, we will create a page with a library. We just need a few simple and easy steps to connect your object to your template and bind your objects to your page.

Why Using Template

Problem 1: After you create your gallery, if there are any updates in the structure or you need to add a class, you will have to apply this change in all of your elements.

Problem 2: You need to add / remove element to a list of elements.

Tools

In this topic, we will use a JavaScript template library. Its name is ‘Justclick’. You will find all examples and class source code here.

Example

Simply gallery page has title and 6 images:

Using the Code

Simple HTML Code Before Applying JustClick Template

Just add images to our page - there is no new code .

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | With No Template</title>
    <link href="css/StyleSheet.css" rel="stylesheet" />
</head>

<body>
    <h1>Image Gallery | With No Template</h1>
    <hr />
    <div>
        <div class="Box">
            Image Name : Image 1
            <br />
            <br />
            <img src="images\img1.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 2
            <br />
            <br />
            <img src="images\img2.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 3
            <br />
            <br />
            <img src="images\img3.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 4
            <br />
            <br />
            <img src="images\img4.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 5
            <br />
            <br />
            <img src="images\img5.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 6
            <br />
            <br />
            <img src="images\img6.jpg" alt="image 1" class="image" />
        </div>
    </div>

</body>
</html>

Example 1: Start Applying Simple Template (Solve Problem 1)

Before we start work, we need to create our object and add it into src/Objects.js.

1. Create Object

Add simple object, one for each object:

HTML

//----------------------------------------- image gallery example ---------------------------------//
var image1 = {
    caption: "caption 1",
    name: "img1.jpg",
    alt: "image 1"
}
var image2 = {
    caption: "caption 2",
    name: "img2.jpg",
    alt: "image 2"
}
var image3 = {
    caption: "caption 3",
    name: "img3.jpg",
    alt: "image 3"
}
var image4 = {
    caption: "caption 4",
    name: "img4.jpg",
    alt: "image 4"
}
var image5 = {
    caption: "caption 5",
    name: "img5.jpg",
    alt: "image 5"
}
var image6 = {
    caption: "caption 6",
    name: "img6.jpg",
    alt: "image 6"
}
//---------------------------------------- image gallery example ---------------------------------//

2. Create Template

Object ID simple-templete will use it to bind object into template to use property from object needed to add {{property_Name}} and compiler will replace the tag with the property value at runtime:

HTML

<script id="simple-templete" type="text/just-click-template">
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
 </script>

3. Start using Template

In page header will add links of our folder
Create object will add template to it
Create template
Bind object to template using Just click library justclick.Complie("template-id", "target-html-element", object);

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | Simple Template</title>

    <link href="css/StyleSheet.css" rel="stylesheet" />

    <!-- you need to add scripts in same order -->
    <script src="js/jquery-2.1.4.min.js"></script> <!-- jQuery -->
    <script src="js/moment.js"></script> <!-- just click library depend on this library -->
    <script src="js/JustClick-Templete.js"></script> <!-- just click library -->
    <!-- object is stored here -->
    <script src="src/Objects.js"></script>

</head>
<body>
    <h1>Image Gallery | With Simple Template</h1>
    <hr />

    <div class="main-container">
        <div id="img1-container"></div>
        <div id="img2-container"></div>
        <div id="img3-container"></div>
        <div id="img4-container"></div>
        <div id="img5-container"></div>
        <div id="img6-container"></div>
    </div>


    <script id="simple-templete" type="text/just-click-template">
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
    </script>

    <script>
        justclick.Complie("simple-templete", "img1-container", image1);
        justclick.Complie("simple-templete", "img2-container", image2);
        justclick.Complie("simple-templete", "img3-container", image3);
        justclick.Complie("simple-templete", "img4-container", image4);
        justclick.Complie("simple-templete", "img5-container", image5);
        justclick.Complie("simple-templete", "img6-container", image6);
    </script>

</body>
</html>

After this step, we solve problem 1 but still have problem in add or remove element from our HTML page.

Example 2: Using Array Template (Solve Problem 2)

1. Create Object

Create array of images object:

JavaScript

//----------------------------------------- image gallery array ---------------------------------//
var images = [
        { caption: "caption 1", name: "img1.jpg", alt: "image 1" },
        { caption: "caption 2", name: "img2.jpg", alt: "image 2" },
        { caption: "caption 3", name: "img3.jpg", alt: "image 3" },
        { caption: "caption 4", name: "img4.jpg", alt: "image 4" },
        { caption: "caption 5", name: "img5.jpg", alt: "image 5" },
        { caption: "caption 6", name: "img6.jpg", alt: "image 6" },
];
//----------------------------------------- image gallery array ---------------------------------//

2. Create Template

{{#each}} and {{#end-each}} will make all elements between them repeated for each element in list:

HTML

<script id="simple-List-Templete" type="text/just-click-template">
    {{#each}}
    <div class="Box">
        Image Name : {{caption}}
        <br />
        <br />
        <img src="images\{{name}}" alt="{{alt}}" class="image" />
    </div>
    {{#end-each}}
</script>

3. Start Using Template

As the previous example, the only change will create only one div for all elements and apply template once by passing array of image:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | Simple Template</title>

    <link href="css/StyleSheet.css" rel="stylesheet" />

    <!-- you need to add scripts in same order -->
    <script src="js/jquery-2.1.4.min.js"></script> <!-- jQuery -->
    <script src="js/moment.js"></script> <!-- just click library depend on this library -->
    <script src="js/JustClick-Templete.js"></script> <!-- just click library -->
    <!-- object is stored here -->
    <script src="src/Objects.js"></script>

</head>
<body>
    <h1>Image Gallery | With List Template</h1>
    <hr />
    <div id="main-container">
    </div>

     
    <script id="simple-List-Templete" type="text/just-click-template">
        {{#each}}
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
        {{#end-each}}
    </script>

    <script>
        justclick.Complie("simple-List-Templete", "main-container", images);
    </script>

</body>
</html>

Code more simple and cleaner than the previous example and more maintainable.

Example 3: Display from Complex Object or from json File

The below object contains multiple object types, first title and second the image list:

1. From Object

JavaScript

//----------------------------------- image gallery complex array ---------------------------------//
var gallery = {
    title: "Image Gallery | With List Template",
    images: [
        { caption: "caption 1", name: "img1.jpg", alt: "image 1" },
        { caption: "caption 2", name: "img2.jpg", alt: "image 2" },
        { caption: "caption 3", name: "img3.jpg", alt: "image 3" },
        { caption: "caption 4", name: "img4.jpg", alt: "image 4" },
        { caption: "caption 5", name: "img5.jpg", alt: "image 5" },
        { caption: "caption 6", name: "img6.jpg", alt: "image 6" },
    ]
};
//----------------------------------- image gallery complex array ---------------------------------//

From json file:

2. Create Template

jc-date-formate="DD-MMM-YYYY" add date format
{{@@date}} insert current date by this command
{{title}} use first element in array
{{#each images}} add array element name images after #each allows complier to select loop items

HTML

<script id="list-Templete" type="text/just-click-template" jc-date-formate="DD-MMM-YYYY">
     <h1>{{title}}</h1>
     <h3>Current Date : {{@@date}}</h3>
     <hr />

     {{#each images}}
     <div class="Box">
         Image Name : {{caption}}
         <br />
         <br />
         <img src="images\{{name}}" alt="{{alt}}" class="image" />
     </div>
     {{#end-each}}
 </script>

3. Full Page Code

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | Simple Template</title>

    <link href="css/StyleSheet.css" rel="stylesheet" />

    <!-- you need to add scripts in same order -->
    <script src="js/jquery-2.1.4.min.js"></script> <!-- jQuery -->
    <script src="js/moment.js"></script> <!-- just click library depend on this library -->
    <script src="js/JustClick-Templete.js"></script> <!-- just click library -->
    <!-- object is stored here -->
    <script src="src/Objects.js"></script>

</head>
<body>
    <div id="main-container">
    </div>

    <script id="list-Templete" 
    type="text/just-click-template" jc-date-formate="DD-MMM-YYYY">
        <h1>{{title}}</h1>
        <h3>Current Date : {{@@date}}</h3>
        <hr />

        {{#each images}}
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
        {{#end-each}}
    </script>

    <script>
        <!-- in case of object-->
        justclick.Complie("list-Templete", "main-container", gallery);
        <!-- in case of json file--></span></font>
        justclick.ComplieFromURL("list-Templete", 
        "main-container", "src/gallery.json");
    </script>

</body>
</html></span></font>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)