Stream: helpdesk (published)

Topic: ✔ Button bindings with Genie and StippleUI


view this post on Zulip Ivan Selin (Sep 12 2023 at 23:00):

Trying to make a simple dashboard app using Genie, but struggling with variable bindings on buttons (q-btn).

Generally was following this tutorial. I've maged to get sliders and other elements working via setting "v-model" attribute in template and corresponding variable in backend part.

HTML part

<q-slider v-model="start_index" :min="1" :max="50" label="true">slider text</q-slider>
<p>{{output_var}}</p>

Julia part

@in start_index = 1
@out output_var = "some text"

@onchange start_index begin
  output_var = "some text with slider input $start_index"
end

But buttons, as it seems, use another mechanism with emitting clicks.
Looks like I should be doing something like this in template for buttons:

<q-btn
              label="button text"
              @click="button_pressed=!button_pressed"
              />
<p>{{button_press_text}}</p>

And in the code

@in button_pressed = false
@out button_press_text = "before pressing"

@onchange button_pressed begin
  # processing code goes there
  button_press_text = "button pressed"
end

But it gives me nothing, button does not respond at all.

Nearly all the tutorials are made in a reactive way, so there are almost no buttons.
And the ones with buttons are either deprecated, or have button code commented out for some reason.

I've also tried @click="button_pressed=true"(just writing the value for the var, not inverting it), but still had no luck

What am I missing? How to make the button work? Maybe I am missing some other attributes or some binding magic?
Where can I look for a doc or a working example?

Running Julia 1.9.3 and Genie 1.20

view this post on Zulip Ivan Selin (Sep 13 2023 at 20:31):

Turns out I had to do it through v-on:click="button_pressed=!button_pressed" in HTML
Taken from Stipple GitHub
If only docs said anything about it…

Question resolved

view this post on Zulip Notification Bot (Sep 13 2023 at 20:31):

Ivan Selin has marked this topic as resolved.


Last updated: Nov 06 2024 at 04:40 UTC