Genie Discord forum

I have a global model page where i want multiple users to access the same page, but when the page reloads or a new user views the page all components (toggle, checkbox) go into their default state. The model for each components is still in the correct state and when i cycle through the component it changes the model, but it does not seem to recognize the model state once the page is reloaded.

This is how I have the global model...

model = Model |> init |> handlers
global model
route("/") do
  html(ui(model), context = @__MODULE__)
end

So, you want to keep the UI in sync across various users? And when someone new accesses the UI or reloads, it should show its previous state instead of the default one.

I believe the way you're defining the model is correct, and you're using the global model in the route so it should keep the same state instead of resetting it. I'll try to come up with an example for this

Meanwhile, we have an example for global models that uses the new API with @init. It's similar to what you're trying to do, except that the state is modified inside the routeinstead of from the UI

https://learn.geniecloud.io/examples/reactive-ui/mutating-reactive-variables/

So, you want to keep the UI in sync across various users? And when someone new accesses the UI or reloads, it should show its previous state instead of the default one.

Yes exactly

So I think i figured out one of the problems i was facing. When i was changing the models to the updated API It got me wondering. When a variable was set as a "Vector{String}" for a toggle or a checkbox it always defaulted after a reload. When it was changed to just a "String" or nothing it synced correctly. I only have two states so i dont think its a problem for me but on the array toggle docs on Quasar it has multiple states for the model.

I was able to adapt this example https://learn.geniecloud.io/examples/reactive-ui/multiple-toggles

and have the multiple toggles synced across browser tabs. Notice that the toggle_states variable is read-write, as it is tagged with @in

module App
using GenieFramework
@genietools

@app begin
    @out toggle_list = ["red", "green", "yellow"]
    @in indiv = false
    @in toggle_states = []
end

@page("/", ui)

route("/init") do
    global model = @init
    "Global model created"
end

route("/shared") do
    page(model,read("toggles.jl.html", String))
end

end

<div v-for="toggle in toggle_list">
    <q-toggle v-model="toggle_states" :label="toggle" :val="toggle" />
</div>
<q-toggle v-model="indiv" />
{{toggle_states}}
{{indiv}}

I'm not sure where the problem could be with your code. Does the example I shared do what you need?

Here's an updated example using @page:

module App
using GenieFramework
@genietools

@app begin
    @out toggle_list = ["red", "green", "yellow"]
    @in indiv = false
    @in toggle_states = []
end

model = @init

@page("/", "toggles.jl.html")
@page("/shared", "toggles.jl.html", Stipple.ReactiveTools.DEFAULT_LAYOUT(), model)

end

I'm getting an error when running it because of the call to @init, but it works. I'll open an issue about it.

Thank you very much @pere, i will be sure to play around with this.