How can I handle onchange for a select option in WebSharper UI.Next

Question

I am trying to display a different SPA view based on the option selected from Doc.Select.

I would like to handle onchange events using WebSharper UI.Next. I have searched around for some information and have seen on which can be set in the attributes of an Elt , like so:

spanAttr [on.click (fun el ev -> ())] [text "some span"]

found here: http://www.websharper.com/question/81410/event-handlers-for-ui-next-elt-objects

However, I am quite unsure of how to handle a change on Doc.Select using the tools available in UI.Next.

I have the following:

let rv = Var.Create "1"
Doc.Select [  ] (fun _ -> "") [ "1"; "2"; "3" ] rv

I am not sure how to get access to onchange events so I can use the router to redirect to a different SPA view.

What is the convention for doing something like changing a view based on the dropdown selection?

Answer 1

You don't need to handle onchange yourself. If you use Doc.Select the corresponding Var will be updated every time the dropdown changes. You can just do something like:

rv.View.Doc(function
    | "1" -> text "page 1"
    | "2" -> text "page 2"
    | "3" -> text "page 3"
    | _ -> failwith "Should never happen")

and embed that into your main Doc that gets rendered.