Sling mapping between component and sling model

[manikanthar1295]

Hi,

how  sling mapping works for UI  component and java class

for example  there is Product component  and respective Sling model is ProductModel in we.retail code.

How Product component will  identify ProductModel.java as sling model class on what basis it will identy.

can any one  explain

let me know if any information is neeed

[Bhuwan_B]

Please check below article to have clarity of Sling Model:

https://aem.redquark.org/2018/10/day-10-getting-to-know-sling-models.html

[Ritesh_Mittal · Accepted solution]

Hi @manikanthar1295 ,

Sling models are nothing but POJO, which includes getters of the properties. Now to have the mapping between your HTML code (which is nothing but the component html/HTL), we can use data-sly-use API, like below

<div data-sly-use.nav="org.example.NavigationModel">${nav.foo}</div>

Here 'nav' is the object carrying all properties defined in Sling Model and NavigationModel is Sling Model. so NavigationModel.java will have a setter called getFoo() which you can access by ${nav.foo}.

Above explanation holds true for non SPA arch type projects, For SPA project you can skip referencing Sling Model inside HTL, the mapping has been specified in React component JS, like below

MapTo('my-react-app/components/content/aem-image')(ReactImage, ImageEditConfig);

were Sling model written for 'my-react-app/components/content/aem-image' resource type will get all the properties injected by react component.

You can refer this video  Sling Model