Is there a way for variables changed in ReactiveHTML's (java)scripts to sync with Python?

Panel
1 
from panel.reactive import ReactiveHTML
import param

class JSSlideshow(ReactiveHTML):

    index = param.Integer(default=0)

    _template = """<img id="slideshow" src="https://picsum.photos/800/300?image=${index}" onclick="${script('click')}"></img>"""

    _scripts = {'click': 'data.index += 1'}

    @param.depends("index", watch=True)
    def _log(self):
        print(self.index)

ss = JSSlideshow(width=800, height=300)
ss

ss.index

self._log() never gets called.

2

Oh can’t use +=

from panel.reactive import ReactiveHTML
import param
import panel as pn
pn.extension()

class JSSlideshow(ReactiveHTML):

    index = param.Integer(default=0)

    _template = """<img id="slideshow" src="https://picsum.photos/800/300?image=${index}" onclick="${script('click')}"></img>"""

    _scripts = {'click': 'data.index = data.index + 1'}

    @param.depends("index", watch=True)
    def _log(self, *args, **kwds):
        print(args)
        print(kwds)
        print(self.index)

ss = JSSlideshow(width=800, height=300)
ss
1 Like
3

Should this be reported as a bug @ahuang11 ?

4

I don’t believe it’s a bug; I think it could be better documented though (at least a mention in the components page)

Created an issue here; Mention updating in place in ReactiveHTML's scripts does not sync Python's variable · Issue #5348 · holoviz/panel · GitHub