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.