Incorporate Extra Personalized Characteristics into Template (Slightly)

I'm interested in including additional attributes when using data-sly-call

Here is the template:

<template data-sly-template.button="${ @ model}">
    <button data-info="Body"
            class="${model.moreClass}">
        ${model.label}
    </button>
</template>

If I want to add extra css classes that are not included in the template, what syntax should I use?

I have attempted the following:

(1)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<div data-sly-call="${btnTemplate.button @ model= btnModel.btn}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">${model.label}</div>

(2)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<sly data-sly-call="${btnTemplate.button @ model= btnModel.btn}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">${model.label}</sly>

(3)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<sly data-sly-call="${btnTemplate.button @ model= btnModel.btn}" data-sly-attribute.aria-expanded="false" data-sly-attribute.toggle-style="${model.toggleStyle}" data-sly-attribute.aria-controls="${model.id}" data-sly-attribute.data-alternate-aria-label="${model.altAriaLabel}">${model.label}</sly>

None of the above methods seem to be working. What is the correct syntax?

The desired rendering is:

<button data-info="Body" class="${model.moreClass}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">
            ${model.label}
        </button>
cssdesign-patternsaemsightly

Answer №1

When you use an HTL template with a sly tag and the data-sly-call attribute, any additional attributes added to the sly element will be disregarded along with its content. Essentially, sly elements act as if they have an unconditional data-sly-unwrap applied to them.

If you have a template that takes a model object as its sole parameter, here is how you can utilize it:

<sly data-sly-use.btnTemplate="button/button.html" />
<!-- The contents of this will be replaced by the template -->
<sly data-sly-call="${btnTemplate @ model=someModel}" />

Any non-data-sly-* attributes beyond that will simply be ignored.

<sly data-sly-call="${btnTemplate @ model=someModel}" attribute-added-here="will not show up" >Neither will this</sly>

The structure of the template looks like this:

<template data-sly-template.button="${ @ model}">
    <button data-info="Body"
            class="${model.moreClass}">
        ${model.label}
    </button>
</template>

You can only control the output by editing the moreClass and label properties in the model passed to the template.

To render something like this:

<button data-info="Body" class="${model.moreClass}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">
    ${model.label}
</button>

You would need to modify the existing template or create a new one to accommodate the extra attributes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

List of shapes and text items

I'm encountering some challenges with my list of shapes - could it be that I am approaching it the wrong way? I could use some guidance on what I am trying to accomplish. Check out My Fiddle CSS: #circle { height: 120px; width: 120px; b ...

htmlcsshtml-lists

I am having trouble viewing elements located below a div that I created using CSS

Currently, I am working on creating a portfolio page where the initial page opens with a height of '100vh' and width of '100%', which seems to be functioning correctly. However, I am facing an issue where I am unable to scroll down to v ...

htmlcssreactjs

How to dynamically adjust the height of a content div in CSS while maintaining fixed headers and foot

Seeking assistance with CSS layout from this amazing community. Desired layout includes a header, footer, left pane, and content area. Current CSS code provided but looking for better solutions. Image of desired layout included along with existing CSS a ...

javascriptjqueryhtmlcss

How do I adjust the Bootstrap 4 column width to match the size of its content?

I am facing the following situation: [![enter image description here][1]][1] What I want is: Number 1: Adjust the column width to fit the content, in this case the image. Number 2: Resize the column width to accommodate the text "Title of Content" ...

htmlcssbootstrap-4

Choosing colors for Font Awesome icons

Is there a way to customize the color of a font awesome icon using CSS? I've tried changing the color of everything except font awesome icons with this code: ::selection{ background: #ffb7b7 !important; /* Safari */ } ::-moz-selection { back ...

cssfont-awesome

Discovering the center of an element and implementing a left float

I'm looking for a way to dynamically position the element #ucp_arrow in the middle of a div using float: left. Here is an illustration: https://i.stack.imgur.com/nzvgb.png Currently, I have hard-coded it like this: JAVASCRIPT: $("#a_account").cli ...

javascriptjqueryhtmlcss

Switch up your text display using JQuery and toggle between different texts

I have implemented a jQuery script to toggle the display of certain paragraphs when the "More" link is clicked. However, I am facing an issue where the link always displays "More" even after the content has been expanded. I want it to change to "Less" once ...

javascriptjqueryhtmlcsstoggle

image in the background following the header

Live Example: http://jsbin.com/opokev/54 I am currently trying to set this image as the background image while also including a header, but as you can see in the demo, the header is overlapping the image. Is there a way I can rearrange this so that the h ...

htmlcssbackground-image

Display hyperlinks upon hovering over text

In the sign-up form, there are options for two different types of users: teachers and students. When the sign-up option is selected, a drop-down menu with choices for teacher and student will appear. However, I would like it to function more like other w ...

javascriptphpcss

Apply a custom CSS class to every `tr` element that includes a particular value

I'm attempting to assign a class to a tr element (last_value_row) in a form when the target value in the first td of the last_value_row element is "New Target". Currently, only the first element will have the class added, while all other elements with ...

javascripthtmlcssdjangodjango-templates

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

javascripthtmlcssvue.jsvuejs2

Issue with SVG mask not functioning when transform is applied

I am struggling to apply a mask to a transformed SVG element. When I try to do this with a path, the structure is the same. If I apply the mask to an element outside of the transformed group, it works as expected. However, if I try to do the same inside, t ...

csssvgmask

Is there a way to dynamically change the height in jQuery/JavaScript?

I am encountering an issue with my embed code where the height changes randomly after a few seconds, depending on certain parameters. Here is an example of the code I am using: $( <embed></embed>) .attr("src", "http://www.bbs.com") ...

javascriptjqueryhtmlcss

Creating a dynamic CSS hover animation for an input element with jQuery to ensure compatibility with Microsoft Edge

I am facing an issue where I have a row of six to nine switches with the <input type="checkbox"> element, and each switch animates when hovered over. In this animation, the knob slides down, and both the knob and track fill with colors or gradients. ...

jqueryhtmlcssmicrosoft-edgejquery-hover

Prevent parent element from changing color when child element is clicked

Check out my HTML: .imageURL:active .image_submit_div { background-color: #ccc; } .image_submit_div:active { background-color: #e6e6e6; } <div class="image_div"> <label for="id_image" class="image_submit_div"> <h3>+ add ...

javascriptjquerycss

"Bootstrap is not aligning div md-6 as expected, instead it is sending it

Within my simple layout, I have 4 columns (col-lg3 col-md/sm-6 and col-xs-12). The display is straightforward, like this: https://i.sstatic.net/OyhNkm.png Everything functions perfectly when each column has a width of 3. However, when they adjust to md o ...

htmlcsstwitter-bootstrap

Drop-down selection triggering horizontal auto-scroll

Within my div element, I have a table with dropdowns. The div is set up to be horizontally scrollable. To create the dropdown functionality, I utilized Harvesthq Chosen. Let me provide some context. In Image 1, you'll notice that I've scrolled ...

javascriptjqueryhtmlcssharvest

Javascript code creates a blur effect on webpage bodies

On my webpage, I have multiple elements, including a "change BG" button. When this button is clicked, I want to hide all other content on the page except for the button using JavaScript. Alternatively, clicking the button could blur out all other elements ...

javascripthtmlcss

Tips for creating a button hover effect with dynamic color and opacity

On my webpage, the button color is determined by an admin using JavaScript on page load. Since I don't know what color will be used, I can't apply rgba(). While using opacity does change the button's color, it also affects the text, which is ...

htmlcss