x-show content is run once only?

[marcomilone]

example:
https://codepen.io/marcomilone/pen/mdezNNB

Hello everybody. 
I'm not a super developer, 
trying to make a small game,   
while trying to understand something about Alpine.js.

In the x-show directive I saw I can put a function. The result can be true / false and the element should behave accordingly.

I cannot use that, because seems that the expression is evaluated once only

Any help? Is that a bug?

MANY thanks

[HugoDF]

The x-show is evaluated once for every Alpine.js render.

I think this might be a bug, as a workaround, you can probably set some random piece of state on Alpine.js.

I've also cleaned up your CodePen and got something that works

https://codepen.io/hugodf/pen/BaoGBWq?editors=0010

[ryangjchandler]

What do we think the bug is, this not getting bound correctly?

[marcomilone]

Hello Hugo.
Now I have 3 questions.

1. That behavior is not so clear in the docs.
   I expected a dynamic behavior.
   Maybe I should use $watch .

2. What do you mean with:

I think this might be a bug, as a workaround, you can probably set some random piece of state on Alpine.js.
?

3. I've also cleaned up your CodePen and got something that works
   Thanks, I see that you cleaned MY workaround.
   Is maybe something related to @ryangjchandler words?

I mean, instead of returning a closure, I return a scoped named object...
So if in the code I need more than one level, or some timeouts, I don't have to remember what is this... but I refer to that variable

(you can see in the row where I set the timeout)

var interface = function() {
    var context = {

        inventory: {
            mousewheeltimeout: false,
            
            mousewheel: function(e){
                //console.log(context.inventory.mousewheeltimeout);
                if (context.inventory.mousewheeltimeout){
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                };
                context.inventory.mousewheeltimeout= true;

                if (e.deltaY>0){
                    inventory_el.scrollBy(0,4);
                }
                else{
                    inventory_el.scrollBy(0,-4);
                }

                setTimeout(function(){
                    context.inventory.mousewheeltimeout= false;
                },50);


                e.preventDefault();
                e.stopPropagation();
                return false;
            }

        };
        
        return context;

    }

[SimoTod]

Hi Marco, the function is reevaluated everytime the component state changes.
I don't think it's a bug, scrolling a div is related to the HTML realm, the component data context (the object that you set in x-data) does not change.
For example Hugo, to force a refresh, updates a random variable.
It's the same in mostly every reactive framework like React or VueJs, it's not possible to watch every possible html properties because the library should read and repaint a page hundreds of times.
The only thing that usually triggers a refresh is a change in the internal state.
TL;DR Everytime you scroll and you need to reevaluate the component you need to update a variable inside your component data.
I hope it helps.

[marcomilone]

Yes, helps much,
thanks for helping me...!

[HugoDF]

@marcomilone actually, yes using $watch and holding the "wanted scroll position" in state might be the cleanest way to do this

In your $watch you can then use scrollTo, and you won't have to set random variables to random values for reactivity.