web - Doc.Checkbox 'change' event does not occur in Websharper.UI.Next -

i have reactive var variable vardone , doc.checkbox representation named cbdoc. after changing value of vardone need call function. this, wrote code illustrated in following pseudo-code:

open websharper open websharper.ui.next open websharper.ui.next.html open websharper.ui.next.notation  // declaring reactive bool variable let vardone = var.create false  (* else *)  // creting doc-representation of model let rendermodel model =       // declaring representation doc element     let cbdone = div0 [ doc.checkbox [ "type" ==> "checkbox" ] vardone ]      let result'doc = // doc-representation, contains cbdone      let my'handler()  : unit -> unit = // function should called when changing value of vardone      // add event handler element cbdone changes     (doc.aspagelet cbdone).body.addeventlistener( "change", my'handler, false )      result'doc 

but unfortunately no event occurs when checkbox changing. question is, doing wrong , there way respond changes in value of vardone variable?

upd

the saddest thing element checkbox not have event handler. evident when debug in browser.

edit: how second solution below implemented current ui.next:

let cbdone =     div [         doc.checkbox [             attr.``type`` "checkbox"             on.viewupdate vardone.view (fun _ _ -> my'handler())         ] vardone     ] 

---

what happens doc.aspagelet adds wrapper around doc, adding event listener wrapper. , if did not, adding event listener div0 created instead of checkbox itself.

that being said, there 2 solutions here:

• the easy solution use attr.handler in checkbox:

  let cbdone =   div0 [     doc.checkbox [       "type" ==> "checkbox"       attr.handler "change" (fun _ -> my'handler())     ] vardone   ] 

• the more complex preferable solution listen changes vardone via view, rather listen events on element.

  now, way ui.next works, views connect sink (ie. rendered document) computed, nothing happen if this:

  let _ = vardone.view |> view.map (fun _ -> my'handler()) 

  instead, result value of above expression (which has type view<unit>) needs connected returned document. can use following helper (which we'll add ui.next in form soon):

  let addviewlistener (view: view<'t>) (f: 't -> unit) (doc: doc) =   view   |> view.map (fun x -> f x; doc.empty)   |> doc.embedview   |> doc.append doc 

  which can use such:

  let cbdone =   div0 [ doc.checkbox [ "type" ==> "checkbox" ] vardone ]   |> addviewlistener vardone.view (fun _ -> my'handler()) 

  the above code means "as long cbdone in rendered document, change vardone trigger my'handler".