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

[vineetham123]

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?

[aanchal-sikka]

@vineetham123 

Please check if your component is extending some other component via sling:resourceSuperType. 

In this case, it might be inheriting files via the parent component. The variable "add" might have been instantiated in inherited files.

[EstebanBustamante · Accepted solution]

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

[kautuk_sahni]

@vineetham123 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.