Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

Passing a parameter using JS Use API

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @benoroszAfter 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
  }
});

 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @benoroszAfter 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
  }
});

 

Avatar

Level 2

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