Question

我正在使用WebSharper 4.3.9并且正在使用WebSharper.UI来尝试在网页中获得变量的双向绑定。

当我在f＃代码中创建HTML元素时，我可以正常工作。

remote2

当用户在rvInput元素中输入文本时，它会镜像到p []

但是当我有一个包含

的html模板时

let Main () =
    let rvInput = Var.Create ""
    let viewInput = View.FromVar rvInput
    let submit = Submitter.CreateOption rvInput.View
    div [] [
        Doc.Input [] rvInput
        Doc.Button "Send" [] submit.Trigger
        p [] [textView viewInput]  // input is mirrored here
        ...
    ]

并执行以下操作

...
<input ws-var="Email" type="email" placeholder="Your Email" autofocus="">
<button ws-onclick="Login">Login</button>
${ServerResponse}
<div ws-hole="EmailEcho" class="echo-input"></div>
...

$ {ServerResponse}元素将替换为onclick事件的响应

但是我无法将用户输入电子邮件字段的文本镜像到emailEcho字段中。

所以我想知道如何将用户输入镜像到

中

type LoginTemplate = Template<"Login.html">

let LoginWidget () = 
    let Email = Var.Create "testing"
    let viewInput = View.FromVar Email
    let serverResponse = Var.Create ""

    LoginTemplate()
        .ServerResponse(serverResponse.View)
        .EmailEcho(viewInput)  // trying to echo what user types on to page
        .Login(fun e ->
                async {
                    let! res = Server.LoginClicked e.Vars.Email.Value 
                    serverResponse.Set res  // set the server response elem on page !this works
                    return ()
                } |> Async.StartImmediate
              )
    .Doc()

模板中的

非常感谢并且非常抱歉这么久的问题德里克

websharper - 使用带双向绑定的html模板

0 个答案: