Simple breadcrumb Sightly component development best practice

[danchapmanme]

I am developing a simple breadcrumb component as my first Sightly component. I am really liking it. Even moving from a component perviously built JSTL component, the presentation code has gone from 46 lines to 8 lines. 

I am extending WCMUse for the model logic e.g to build a list of trail items (pages).

I have a small requirement to show the trail title based on if specific properties exist e.g. navigation title, then page title, then page name.

I could approach this in two ways:

1. Return a list of pages (com.day.cq.wcm.api.Page) from the model (Java class) and use the view logic (JavaScript) to show one of the three properties.

breadcrumb-trail.js

trail.title = this.page.navigationTitle || this.page.title || this.page.name;

2. Let the model (Java class) create a trail item model that exposes a title property containing the logic to show navigation title, page title or name.

BreadcrumbTrailItem.java

public String getTitle() { if (StringUtils.IsNotEmpty(trailPage.getNavigationTitle())) { return trailPage.getNavigationTitle(); } else if (StringUtils.IsNotEmpty(trailPage.getTitle()) { return trailPage.getTitle(); } else { return trailPage.getName() } }

[Feike_Visser1]

why not in just one expression?

${ yourvar.page.navigationTitle || yourvar.page.title || yourvar.page.name }

[danchapmanme]

Thanks Feike,

I wanted to avoid having logic in too many difference places in addition to the JavaScript and Java models. I guess I could remove the JavaScript file all together.

Is it normal to use a Java class model and a JavaScript model together, or should only one used of the other?

[Feike_Visser1 · Accepted solution]

To me in this case the Javascript is not really needed here.

And to avoid logic in too many places, you can create a data-sly-template that is used in many places, this then holds the logic to print the write name.

<template data-sly-template.pageTitle="${ @ page }>

<div>${ page.navigationTitle || page.title || page.name }</div>

</template>

Then you can call this via <li data-sly-call="${ pageTitle @ page = item.page}"></li>

Hope this helps.