Object found in an htl file but don't know how it was imported

Question

In an html file I can see a code like below.

{{@root.group.name}} - {{add.cityCode}}

I believe that 'add' is an object . But I cannot see a statament like data-sly-use.add=//some class name

in the htl file. There is only a single occurrence of 'add' in the file. Could you please tell me how is it possible? Also I need to show a Item add.cityZip if cityZip is not null (cityZip is a string a suppose that it can be null or empty). If it is empty I need to show {{@root.group.name}} - {{add.cityCode}} otherwise I

need to show {{@root.group.name}} - {{add.cityZip}}-{{add.cityCode}}. could anyone share how can we use the if else here?

EstebanBustamante · Accepted Answer

Because of the presence of the '@root' object, my initial assumption would be that the scripting language in use is Handlebars.js (https://handlebarsjs.com/api-reference/data-variables.html). However, it is possible that it could be any other JavaScript templating language utilizing 'root' as part of its syntax. Nonetheless, the use of '@root' strongly suggests the presence of an additional templating language alongside HTL. Most likely, this is compiled through JS. I recommend reviewing the code to identify any additional JS frameworks that your project might be utilizing.

Once you determine the specific framework, you can refer to the documentation of that framework to learn how to implement an if/else condition.

Hope this helps