websharper - using html template with two way binding

Question

I am using WebSharper 4.3.9 and am using WebSharper.UI to try to get two way binding of variables in a web page.

I can get things working when I create the HTML elements in the f# code.

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

When the user enters text into the rvInput element, it is mirrored to the p[]

But when I have an html template that contains

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

and do the following

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

The ${ServerResponse} element is replaced with the response from the onclick event

But I cannot mirror the text that the user enters into the email field into the emailEcho field.

So I am wondering what I can do to get the users input mirrored into the

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

in the template

Many thanks and very sorry for such a long question Derek

score 2 · Answer 1 · answered May 11 '18 at 08:06

2

You need to add this in your template:

    .Email(Email)

This binds your Email Var to the <input ws-var="Email">, and therefore also to e.Vars.Email.

answered May 11 '18 at 08:06

Tarmil

11,177
30
35

Hi Tarmil, sorry for my late response of thanks, I did not log in over the weekend. That did the trick. I did upcast this answer but because I am new StackOverflow I got a message saying it would not show in public interface. But many thanks, I cannot believe I missed that. – Derek Lavine May 14 '18 at 02:22

websharper - using html template with two way binding

1 Answers1