ClientSide.fs

open WebSharper
open WebSharper.JavaScript
open WebSharper.UI.Next
open WebSharper.UI.Next.Client
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Notation

[<JavaScript>]
module Client =

    type Template = Warp.Template<"""
        <div>
            <input ws-var="Test" placeholder="Inside template" />
            <span>Inside template: ${Test}</span>
        </div>
        <div>
            <button ws-onclick="Reset">Reset</button>
        </div>
        <div>
            <button ws-onclick="Submit">Submit</button>
        </div>""">

    let TemplatingPage() =
        let tpl =
            Template()
                .Reset(fun m -> m.Vars.Test := "")
                .Test("hey")
                .Submit(fun m ->
                    JS.Alert ("Submitted: " + !m.Vars.Test)
                    m.Vars.Test := ""
                )
                .Create()
        Doc.Concat [
            h1 [text "Templating tests"]
            div [
                Doc.Input [attr.placeholder "Outside template"] tpl.Test
                span [text "Outside template: "; textView tpl.Test.View]
            ]
            tpl.Doc
        ]

ServerSide.fs

open WebSharper
open WebSharper.JavaScript
open WebSharper.Sitelets
open WebSharper.UI.Next
open WebSharper.UI.Next.Server

module Site =
    open WebSharper.UI.Next.Html
    open WebSharper.Web

    type Template = Warp.Template<"""
        <input ws-var="Var" />
        <button ws-onclick="Click">Click me!</button>
    """>

    let TemplatingPage (ctx: Context<_>) =
        let text = "You typed: " // Testing captured values in quoted parameters
        div [
            ctx.ClientSide(Client.TemplatingPage())
            Template()
                .Click(fun m -> JS.Alert(text + m.Vars.Var.Value))
                .Click(fun m -> Console.Log(m.Target, m.Event))
                .Create()
                .Doc
        ]