Prerequisites:
Nuget 2.7 or newer,
Visual Studio 2010 or newer
index.html and copy the <body> content from the rightClient.fs and add the code on the right1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<body>
<h1>My TODO list</h1>
<div id="tasks" data-children-template="Main">
<ul data-hole="ListContainer">
<li data-template="ListItem">
${Task} <button data-event-click="Done">Done</button>
</li>
</ul>
<div>
New task: <input data-var="Task" placeholder="Add task"/>
<button data-event-click="Add">Add</button>
<div>You are about to add: ${Task}</div>
</div>
</div>
<script type="text/javascript"
src="Content/UINextApplication1.min.js"></script>
</body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
namespace UINextApplication1
open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Notation
[<JavaScript>]
module Client =
type IndexTemplate = Templating.Template<"index.html">
let Tasks = ListModel.FromSeq ["Have breakfast"]
let Main =
JQuery.Of("#tasks").Empty().Ignore
let newName = Var.Create ""
IndexTemplate.Main.Doc(
ListContainer =
(ListModel.View Tasks |> Doc.Convert (fun name ->
IndexTemplate.ListItem.Doc(
Task = View.Const name,
Done = (fun e -> Tasks.Remove name)))
),
Task = newName,
Add = (fun e ->
Tasks.Add(newName.Value)
Var.Set newName "")
)
|> Doc.RunById "tasks"
From $25 / month
Access the latest extensions and tools, and use them without royalty even after your subscription expires.
SubscriptionsFrom $2,500 / year
Let our support handle the tough issues, and jumpstart your team with our training and architectural review.
Support plansGet answers before you go premium, and talk to us about what you need for your next WebSharper project.
Contact1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
namespace SinglePageApplication1
open WebSharper
open WebSharper.JavaScript
open WebSharper.Html.Client
open WebSharper.Google.Visualization
open WebSharper.Google.Visualization.Base
[<JavaScript>]
module Client =
let AreaChartData () =
let data = new Base.DataTable()
data.addColumn(ColumnType.NumberType,"Year") |> ignore
data.addColumn(ColumnType.NumberType,"Sales") |> ignore
data.addColumn(ColumnType.NumberType,"Expenses") |> ignore
data.addRows(4) |> ignore
[ [2004; 1000; 400]
[2005; 1170; 460]
[2006; 660; 1120]
[2007; 1030; 540] ]
|> List.iteri (fun i yearData ->
List.iteri (fun j value ->
data.setValue(i, j, value)) yearData)
data
let Main =
Div []
|>! OnAfterRender (fun container ->
let visualization = new BarChart(container.Dom)
let options =
BarChartOptions(
width = 400,
height= 240,
legend= Legend(position=LegendPosition.Bottom),
title = "Company Performance")
visualization.draw(AreaChartData(), options))
|> fun el ->
el.AppendTo "entrypoint"
Prerequisites:
Nuget 2.7 or newer,
Visual Studio 2010 or newer
Client.fs and add the code on the left<div id="entrypoint"></div>index.html in the
body tag before the
script link
16 Mar 2015
25 Feb 2015
6 Dec 2014
3 Dec 2014