WebSharper allows several ways to instatiate HTML, and It took me some thinking to get these terms right:

  • ws-replace
  • ws-hole
  • ws-template
  • ws-template-children

Replace

Replace the given node with the provided string or list of docs.

<div ws-replace="Body">
</div>

MyTemplate()
	.Body(h1 [] [text "Hallo"])
	.Doc()

<h1>Hallo</h1>

Hole

Fills the child nodes with the given string or sequence of Docs.

<div ws-hole="Body">
</div>

MyTemplate().Body(h1 [] [text "Hallo"])

<div>
  <h1>Hallo</h1>
</div>

Template

<div ws-template="MyParagraph">
  <p>
    Hallo ${Name}
  </p>
</div>

MyTemplate.MyParagraph().Name("Markus")

<div>
  <p>
    Hallo Markus
  </p>
</div>

Holes and Templates

Holes and templates are often used to fill lists:

<div>
  <ul>
    <div ws-replace="MyItems"></div>
    <div ws-template="MyItem">
      <li>Item: ${Name}</li>
    </div>
  </ul>
</div>
<div

let viewMyItem item =
	MyTemplate.MyItem()
		.Name(item)
		.Doc()
 
MyTemplate.MyItems(
	[ "Apples"; "Pears"] 
	|> Seq.map viewMyItem
	|> Doc.Concat
)
.Doc()

<div>
  <h1>Hallo</h1>
</div>