Without seeing the actual code, it's challenging to provide a context-aware response.
However, you can achieve your goal by creating a shared template that both views can use while initializing your resource or Sling Model only once. Here's how to do it:
<!--/* Initialize your resource/model ONCE */-->
<sly data-sly-use.model="com.example.MyComponentModel"/>
<!--/* Define template for both views */-->
<template data-sly-template.mobileView="${@ model}">
<!--/* Mobile-specific markup using ${model.property} */-->
<div class="mobile">
${model.mobileContent}
</div>
</template>
<template data-sly-template.desktopView="${@ model}">
<!--/* Desktop-specific markup using ${model.property} */-->
<div class="desktop">
${model.desktopContent}
</div>
</template>
<!--/* Render appropriate view */-->
<sly data-sly-call="${desktopView @ model=model}"></sly>
<sly data-sly-call="${mobileView @ model=model}"></sly>The data-sly-use initializes the model once at the root level
Templates accept the pre-initialized model as a parameter
Both templates share the same model instance
- The templates act as pure presentation layers that consume the already initialized model, eliminating duplicate resource calls.
