Doc.Checkbox 'change‘事件在Websharper.UI.Next中不发生

Question

我有反应性Var变量varDone和Doc.Checkbox来表示它的名称为cbDoc。在更改varDone的值之后，我需要调用我的函数。为此，我编写了如下伪代码中所示的代码：

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

(* something else *)

// creting Doc-representation of my model
let renderModel model = 

    // declaring its representation Doc element
    let cbDone = Div0 [ Doc.CheckBox [ "type" ==> "checkbox" ] varDone ]

    let result'doc = // a Doc-representation, that contains cbDone

    let my'handler()  : unit -> unit = // a function that should be called when changing the value of varDone

    // add an event handler for the element cbDone changes
    (Doc.AsPagelet cbDone).Body.AddEventListener( "change", my'handler, false )

    result'doc

但不幸的是，当复选框更改时，不会发生任何事件。问题是，我做错了什么，还有其他方法来响应varDone变量值的变化吗？

UPD

最可悲的是，带有复选框的元素甚至没有我的事件处理程序。这一点在浏览器中调试时很明显。

Answer 1

编辑:下面的第二个解决方案是如何用当前的WebSharper.UI实现的：

let cbDone =
    div [] [
        Doc.CheckBox [
            attr.``type`` "checkbox"
            on.viewUpdate varDone.View (fun _ _ -> my'handler())
        ] varDone
    ]

所发生的情况是，Doc.AsPagelet在文档周围添加了一个包装器，所以您将向该包装程序添加一个事件侦听器。即使没有，您也会将事件侦听器添加到您创建的Div0中，而不是CheckBox本身。

尽管如此，这里有两个解决方案：

• 简单的解决方案是在您的Attr.Handler中使用CheckBox： 让cbDone = Div0 [ Doc.CheckBox“键入”==>“复选框”Attr.Handler "change“(Attr.Handler_ -> my‘’handler() varDone ]]
• 更复杂但通常更可取的解决方案是通过一个varDone监听对View的更改，而不是侦听元素上的事件。 现在，UI.Next的工作方式，只有连接到接收器的视图(即。)实际上是计算出来的，因此，如果您只执行以下操作，则不会发生任何事情： let _= varDone.View |> View.Map (fun _ -> my‘’handler()) 相反，上述表达式(具有View<unit>类型)的结果值需要连接到返回的文档。您可以使用以下助手(我们可能很快会以某种形式将其添加到UI.Next中)： 让AddViewListener ( view : View< 'T >) (f：‘t -> unit) ( doc : Doc) =view |> View.Map ( -> f；Doc.Empty) |> Doc.EmbedView |> Doc.Append doc 您可以这样使用： 让cbDone = Div0 [ Doc.CheckBox“类型”==>“复选框”varDone ] |> AddViewListener varDone.View (fun _ -> my‘’handler()) 上面的代码基本上意味着“只要cbDone在呈现的文档中，对varDone的任何更改都会触发my'handler”。