Javascript Use API Example

·                HTL ( previously known as Sightly ) focuses on the separation of concerns. 

·                UI Developers shouldn't worry about back-end logic as they use to be with JSPs,

·                With HTL back-end logic should come from Java or Javascript.

·                As a HTL Developer, you are provided with Use API  you can simply call logic by data-sly-use operator.

·   Syntax: 

       .     data-sly-use.objectName =" JAVA class  /Java script name "

·                An object is created and that object can be used for accessing properties returned by Java or javascript.

Step. 1: Create a component  in /apps/project/component directory

Step. 2: Create a Javascript file as following which can do all computation and return usable values
componentLogic.js
"use strict"

use(function () {

    var title = currentPage.name;

    var desc = "This is training page";

     return {
          title :title,
          description :desc

    };
});

Step3: Call component logic using data-sly-use, make use of an object to access returned Values.
componentA.html
<div data-sly-use.objectA="componentLogic.js" >
        ${ objectA.title}
        ${objectA.desc}
</div>