How do you bind attributes of tags to state vars changes

[iongion]

By intuition I tried this and is not working

const { div, img, button } = van.tags;

const App = () => {
   const isOpen = van.state(false);
   const imgSrc = van.bind(isOpen, (v) => v ? "open-icon.png" : "close-icon.png");
   return div(
    { class: "App" },
    button({ onClick: () => isOpen.val = !isOpen.val; }),
   img({ src: imgSrc })
}

[Tao-VanJS]

Hi,

Thanks for reaching out!

The idiomatic solution for your use case is to use State-derived properties. Thus instead of having:

const imgSrc = van.bind(isOpen, (v) => v ? "open-icon.png" : "close-icon.png");

you can have:

const imgSrc = {deps: [isOpen], f: (v) => v ? "open-icon.png" : "close-icon.png"}

This technique is illustrated in sample app JSON Inspector (code) and Textarea with Autocomplete (code).

btw: I guess onClick should be onclick which is a native property of DOM node.