F#
HTML
Result
Hosted on
Try WebSharper
<
>
namespace Test open WebSharper open WebSharper.JavaScript open WebSharper.JQuery open WebSharper.UI.Next open WebSharper.UI.Next.Client open WebSharper.UI.Next.Html [<AutoOpen; JavaScript>] module ViewModels = type MyRowDataModel = { Id : int Name : string IsSelected : bool } static member Create (id, name) = { Id = id Name = name IsSelected = false } type MyDataModel = { Rows : ListModel<int, MyRowDataModel> } member this.HaveSelectedData = this.Rows.View |> View.Map (fun data -> data |> Array.ofSeq |> Array.fold (fun s t -> s || t.IsSelected) false) static member CreateTestData() = let rowsData = [ (1, "Row 1"); (2, "Row 2") ] { Rows = ListModel.Create (fun rowModel -> rowModel.Id) (rowsData |> List.map MyRowDataModel.Create) } [<JavaScript>] module Code = type MyTemplate = Templating.Template<Snippet.IndexHtml> let model = MyDataModel.CreateTestData() let Main = MyTemplate.Main() .Message(model.HaveSelectedData |> View.Map (fun f -> if f then "Something is selected" else "Nothing is selected")) .MyDatas( ListModel.View model.Rows |> Doc.BindSeqCached (fun myRowDataModel -> let isSelected = model.Rows.LensInto (fun d -> d.IsSelected) (fun t v -> {t with IsSelected = v}) myRowDataModel.Id MyTemplate.RowData() .IsSelected(isSelected) .Name(myRowDataModel.Name) .Doc() ) ) .SelectAll(fun _ -> model.Rows.UpdateAll (fun d -> Some ({d with IsSelected = true}))) .DeselectAll(fun _ -> model.Rows.UpdateAll (fun d -> Some ({d with IsSelected = false}))) .Doc() |> Doc.RunById "main"
<!DOCTYPE html> <html lang="en"> <head> <meta chartset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title></title> <style> *[ws-template], *[ws-children-template] {display: none;} </style> </head> <body> <div id="main"></div> <div ws-children-template="Main"> <div class="hpanel"> <div class="panel-heading"> ${Message} </div> <div class="panel-body list"> <table> <thead> <tr> <th></th> <th>Name</th> </tr> </thead> <tbody ws-hole="MyDatas"> <tr ws-template="RowData"> <td> <div class="checkbox"> <input type="checkbox" ws-var="IsSelected"> <label></label> </div> </td> <td>${Name}</td> </tr> </tbody> </table> </div> <div class="panel-footer"> <a class="btn btn-default" ws-onclick="SelectAll">Select All</a> <a class="btn btn-default" ws-onclick="DeselectAll">Deselect All</a> </div> </div> </div> </body> <!--[BODY]--> </html>