websharper - 使用带有两种方式绑定的 html 模板答案

【问题标题】：websharper - using html template with two way bindingwebsharper - 使用带有两种方式绑定的 html 模板
【发布时间】：2018-05-11 16:06:09
【问题描述】：

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

当我在 f# 代码中创建 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
        ...
    ]

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

但是当我有一个包含的html模板时

...
<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>
...

然后执行以下操作

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()

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

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

所以我想知道我可以做些什么来让用户输入镜像到

<div ws-hole="EmailEcho" class="echo-input"></div>

在模板中

非常感谢，非常抱歉这么长的问题德里克

【问题讨论】：

标签： templates f# websharper

【解决方案1】：

你需要在你的模板中添加这个：

    .Email(Email)

这会将您的Email Var 绑定到<input ws-var="Email">，因此也绑定到e.Vars.Email。

【讨论】：

您好 Tarmil，对于我迟到的感谢回复感到抱歉，我周末没有登录。那成功了。我确实提出了这个答案，但因为我是新的 StackOverflow，我收到一条消息说它不会显示在公共界面中。但是非常感谢，我不敢相信我错过了。