Я использую WebSharper 4.3.9 и использую WebSharper.UI, чтобы попытаться получить двустороннее связывание переменных на веб-странице.
Я могу заставить все работать, когда создаю элементы HTML в коде f #.
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>
в шаблоне
Большое спасибо и очень жаль за такой длинный вопрос
Derek