Skip to main content
Level 2
August 23, 2023
Solved

Passing a parameter using JS Use API

I'm extending the list core component and implementing pagination and filtering via the JS Use API, but I'm having an issue passing values to the JS.

 

The HTL I have:

 

<sly data-sly-use.list="...TextList"></sly> <sly data-sly-use.pagination="${ 'text-list.js' @ listID = list.id, val = 'red' }"></sly> <div>JS: ${ pagination.listID }</div> <div>JS: ${ pagination.val }</div>

 

 And text-list.js:

 

use( () => { return { listID: this.listID, val: this.val } });

 

 

Neither the value passed from Java nor the string will pass through, the rendered HTML I get is

 

JS: JS:

 

 

From all answers here and on StackOverflow I've seen of using the JS Use API, this syntax should be correct and I should be able to access those parameters just fine.

 

I know I can access data in JS using data- attributes as well, but I'm pretty sure that that isn't the case with the Use API because it's server-side JS, so I'm not sure how else I would send the data through that I need.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Mahedi_Sabuj
Mahedi_SabujAccepted solution
Community Advisor
August 23, 2023

Hi @benorosz, After switching from Arrow function to regular function, the issue was resolved and the code started functioning correctly.

use(function () { return { listID: this.listID, val: this.val } });

 

Mahedi Sabuj

2 replies

Mahedi_Sabuj
Community Advisor
Mahedi_SabujCommunity AdvisorAccepted solution
Community Advisor
August 23, 2023

Hi @benorosz, After switching from Arrow function to regular function, the issue was resolved and the code started functioning correctly.

use(function () { return { listID: this.listID, val: this.val } });

 

Translate
Mahedi Sabuj
benoroszAuthor
Level 2
August 23, 2023

I'm too used to writing JS, I forget this is interpreted differently. That did the trick, thanks!

Translate