0

我使用组合器构建了一个 WebSharper formlet，但我的目标是将它嵌入到 jQueryUI 弹出窗口中。因此，当用户单击“否”时，我需要能够关闭对话框，以下内容不起作用：

let confirmationForm order =
    let title = DialogConfiguration(Title = "Are you sure you want to place the order?")
    let form = Formlet.Return ()
                |> Enhance.WithCustomSubmitAndResetButtons
                    { Enhance.FormButtonConfiguration.Default with Label = Some "Yes" }
                    { Enhance.FormButtonConfiguration.Default with Label = Some "No" }
                |> Enhance.WithFormContainer
    let rec dialog = Dialog.New(Div [ result ], title)
    and result =
        Formlet.Do {
            let! _ = form |> Enhance.WithResetAction (fun _ -> dialog.Close(); true)
            dialog.Close()
            return Server.SubmitOrder order
        } |> Enhance.WithFormContainer

    (dialog :> IPagelet).Render()

Formlet.Do {
    let! order = orderForm
    return confirmationForm order
}
|> Enhance.WithFormContainer

单击是，对话框关闭正常。此外，我不理解要求我提供返回 true 的函数的签名，这有点令人困惑，因为我不需要提供任何其他回调。

另外，请注意，我很惊讶它支持相互递归函数以允许向 Dialog 的 Div 提供工作流。我假设会有更好的方法来做到这一点？

谢谢！

4

1 回答 1

1

这是一个通用函数，用于在 jQueryUI 对话框中显示任何 formlet：

[<JavaScript>]
let InDialog (title: string) (formlet: Formlet<'T>) =
    Formlet.BuildFormlet <| fun _ ->
        let state = new Event<_>()
        let conf =
            JQueryUI.DialogConfiguration (
                Modal = true,
                DialogClass = "dialog",
                Title = title
            )
        let dialogOpt : ref<option<JQueryUI.Dialog>> = 
            ref None
        let el =
            Div [
                formlet
                |> Formlet.Run (fun confirmed ->
                    match dialogOpt.Value with
                    | Some dialog ->
                        state.Trigger (Result.Success confirmed)
                        dialog.Close()
                    | None ->
                        ()
                )
            ]
        let dialog = 
            JQueryUI.Dialog.New(el, conf)
        dialogOpt := Some dialog
        Div [dialog] , ignore , state.Publish

以及一个使用它的例子：

[<JavaScript>]
let Main () =
    Formlet.Do {
        let! _ =  Controls.Button "Display Form"
        let! name = 
            Controls.Input ""
            |> Enhance.WithSubmitAndResetButtons "Submit" "Reset"
            |> InDialog "Enter your name" 
        return ()
    }

关于您关于布尔返回值的问题。我假设您指的是 Enhance.WithResetAction。该值确定执行操作后是否重置 formlet。

于 2011-09-22T12:50:03.113 回答