How to bind class to a result of a function ?

[Mushr0000m]

Hi have a rotating cards system (3 in my case) and need to set a is-current class on the clicked card and is-previous on the previous card and is-next on the next card. But doing it with the x-bind:class={} synthax it ends up being huge like this :

<div class="card" x-bind:class="{
    'is-previous': current === 1,
    'is-current': current === 2,
    'is-next': current === 3
}">...</div>
<div class="card" x-bind:class="{
    'is-previous': current === 3,
    'is-current': current === 1,
    'is-next': current === 2
}">...</div>
<div class="card" x-bind:class="{
    'is-previous': current === 2,
    'is-current': current === 3,
    'is-next': current === 1
}">...</div>

Is there a way to extract this logic to a function and doing something like (not and object anymore) :

<div class="card" x-bind:class="calculateMyClass(currentIndex)">...</div>

[KevinBatdorf]

Is there a way to extract this logic to a function and doing something like (not and object anymore) :
<div class="card" x-bind:class="calculateMyClass(currentIndex)">...</div>

Did that not work?

[Mushr0000m]

Yes it worked, but because in the doc it only says we should use object synthax and also coming from VueJS we should use computed properties to do so. So even if it works I'm not sure if it's the right way and if I'm not create an issue for future binding reactivity or something else... That's why I wanted to know the right way when you need complex computation for class binding.

[KevinBatdorf]

It's fine. It's probably better even. There's an early return if you pass in a function.

alpine/src/utils.js

Line 64 in 85cceda

export function saferEval(expression, dataContext, additionalHelperVariables = {}) {

if (typeof expression === 'function') {
    return expression.call(dataContext)
}

[Mushr0000m]

Ho ok, I was looking at the code here https://github.com/alpinejs/alpine/blob/85ccedaec699f750c4be4d429d66c1b40b33c43f/src/directives/bind.js#L47-L67 and didn't quite understood what does what...

[KevinBatdorf]

That processes whatever is returned from your function or object, etc.

If your return value is an array, object, etc it will handle how it applies the classes differently.

[Mushr0000m]

Thank you for your explanations !