WebSharper example

websharper.fs

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI
open WebSharper.UI.Client

[<JavaScript>]
module Code =
    // This creates a typed access to the HTML template (see the Markup tab)
    type IndexTemplate = Templating.Template<Snippet.IndexHtml>

    [<NoComparison>]
    type Task = { Name: string; Done: Var<bool> }

    let Tasks =
        ListModel.Create (fun task -> task.Name)
            [ { Name = "Have breakfast"; Done = Var.Create true }
              { Name = "Have lunch"; Done = Var.Create false } ]

    let NewTaskName = Var.Create ""

    let Main =
        IndexTemplate.Main()
            .ListContainer(
                ListModel.View Tasks |> Doc.BindSeqCached (fun task ->
                    IndexTemplate.ListItem()
                        .Task(task.Name)
                        .Clear(fun _ -> Tasks.RemoveByKey task.Name)
                        .Done(task.Done)
                        .ShowDone(Attr.DynamicClass "checked" task.Done.View id)
                        .Doc()
                ))
            .NewTaskName(NewTaskName)
            .Add(fun _ ->
                Tasks.Add { Name = NewTaskName.Value; Done = Var.Create false }
                Var.Set NewTaskName "")
            .ClearCompleted(fun _ -> Tasks.RemoveBy (fun task -> task.Done.Value))
            .Doc()
        |> Doc.RunById "tasks"