Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bind not working in v-html #136

Closed
Wikunia opened this issue Aug 3, 2022 · 3 comments
Closed

bind not working in v-html #136

Wikunia opened this issue Aug 3, 2022 · 3 comments

Comments

@Wikunia
Copy link

Wikunia commented Aug 3, 2022

I'm very new to Stipple and Genie so maybe I'm doing something terribly wrong 😄
I have the following code:

using Stipple
using StippleUI

@reactive! mutable struct SBModel <: ReactiveModel
  clicks::R{Int} = 0
  value::R{Int} = 0
  dict::R{Dict} = Dict{String, Any}("first" => value, "second" => Dict("inner" => 1))
  html::R{String} = render(dict)
end


function render(i::Int, keychain="dict")
  input("", placeholder="$i", @bind(keychain, "number"))
end

function render(p::Pair, keychain="dict")
  k = "$(keychain).$(p.first)"
  return span([p(p.first), render(p.second, k)])
end

function render(d::Dict, keychain="dict")
  list = []

  for v in d
      k = "$(keychain).$(v.first)"
      push!(list, [p(v.first), render(v.second, k)])
  end
  
  return ul(list)
end

function handler(model)
  on(model.value) do (_...)
    d = model.dict[]
    d["first"] = model.value[]
    # adding a new key
    d["help"] = 1
    model.dict[] = d
    println("model.value: ", model.value[])
    model.html[] = render(d)
  end
  on(model.dict) do (_...)
    @show model.dict[]
  end
  model
end

function ui(model::SBModel)
  [
    page(model,
      class = "container",
      title = "Buttons demo",
      [
        heading("Buttons")
        row(
          [
            cell([btn("Less! ", @click("value -= 1"))])
            cell(
              [
                span(var"v-html"="html")
              ],
            )
            cell([btn("More! ", @click("value += 1"))])
          ],
        )
      ],
    ),
  ]
  
end

route("/") do
  model = SBModel |> init |> handler
  ui(model) |> html 
end

up(rand((8000:9000)), open_browser = true)

based on the StippleDemo button example.

Now when I change on a button the new "help" part is rendered as well so the model.html is reactive and everything works fine.
Though when I change the value in an input field now it doesn't call the on(model.dict) method.
If I change span(var"v-html"="html") to model.html[] then the @bind works but it isn't reactive on the html anymore so I can't add the help.

Is this in any way reasonable or should I do something very different?

Thanks in advance!

@hhaensel
Copy link
Member

This will not work. HTML code that is included this way will not be evaluated by Vue. If you want to edit the content of variable Dicts have a look at https://github.com/GenieFramework/StippleDemos/blob/master/BasicExamples/Tree/EditableDict.jl

@hhaensel
Copy link
Member

@Wikunia can we close this?
Or does the link not provide sufficient detail?

@essenciary
Copy link
Member

Closing as old issue/version and lack of feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants