Using ZK MVVM what's the best way to show/hide image based on textbox value?

Question

I have a textbox and an image. When the user inserts text into the textbox I want to change the image shown. My doubt is how to do this in a MVVM way and in a "clean" way (following best practices).

<textbox id="searchTextbox" onChanging="@command('search')"/>
<image id="searchImage" src="/img/textbox/search-icon.png" ca:blueeyename="searchImage" />

The way I have to achieve this seems to me to be "cumbersome": change image to:

<image id="searchImage" src="@load(vm.imageSrc)" ca:blueeyename="searchImage" />

and then in my viewModel I have the "imageSrc" variable. On my "search" command I change the imageSrc variable to the correct value.

My solution seems a bit ugly as I have to create a variable on my ViewModel. I would expect to achieve all this on my .zul file.

Any way to do this in a cleaner way?

Answer 1

AlfaTeK,

You are 100% doing MVVM. You don't wire textbox to your controller but set a variable that represents the src.

I have already reviewed a lot of code of people who where thinking doing MVVM and just keep on mixing MVC and MVVM.

(also congratz to use @load and not @bind, its logic but strange enough lot's of people use for almost everything @bind)

A cleaner way isn't there but if you really want to do it in your zul you can use <zscript> but personally for me thats just uglier.

Greetz chill.