dotnet-websharper / ui

A reactive UI library for WebSharper.
https://websharper-samples.github.io/ui/
Apache License 2.0
77 stars 22 forks source link

Alternative to Doc.SetText #218

Closed ingted closed 3 years ago

ingted commented 3 years ago

How do I change my code after migration of latest UI library?

    type JQuery with
        [<Inline "$0.tagsinput({ typeaheadjs: { source: $1 }})">]
        member this.TagsInput (source: FuncWithArgs<string * (string [] -> unit), unit>) = X<unit>

        member this.TagInput (onChange: (string * (string [] -> unit)) -> unit) onSelect = 
            do this.TagsInput <| FuncWithArgs(onChange)

            let getValue() =
                this.Val() |> string |> onSelect

            this.On("itemAdded", fun _ _ -> getValue())
                .On("itemRemoved", fun _ _ -> getValue())

The SetText doesn't work now...

        JQuery.Of(input)
              .TagInput (fun (query, cb) -> cb (states |> Array.filter (fun (e: string )-> e.Contains query))) (pre.SetText)
granicz commented 3 years ago

SetText is a member on Elt, the type representing HTML/DOM elements, whereas a Doc is "document" (possibly empty or with multiple nodes). This has always been the cause of a lot of misunderstanding, namely that a Doc is not a one-to-one mapping to an actual HTML tag, it's "more". Assuming that your pre is a pre DOM placeholder node, you should create it with Elt.pre to give you an Elt as opposed to a Doc, unlocking access to SetText. @Tarmil or @Jand42 - any other ideas here?

ingted commented 3 years ago

Thanks for the information!!! Now this works for me:

(pre :?> Elt).SetText

Really cool!!!