Template Fragment - js-lib-com/wood GitHub Wiki

When content component is referring to a template using canonical syntax there are two operators involved: wood:template="template/path" to declare template path and wood:content="editable-name" to bind content to template editable element.

For templates with a single editable element is possible to merge those two operators into a single one: wood:template="template/path#editable-name". Please not the hash (#) character.

Canonical Syntax

Be it a template with a single editable element named section. Template path is template/page.

  • template/page/page.htm
<!-- template component -->
<body xmlns:wood="js-lib.com/wood">
	<h1>Body Title</h1>
	<!-- editable element -->
	<section wood:editable="section"></section>
	<footer>copyright (c) 2022</footer>
</body>

On canonical syntax there are two operators and content component should declare embed root element.

  • page/index/index.htm
<!-- content component -->
<embed wood:template="template/page" xmlns:wood="js-lib.com/wood">
	<!-- content element -->
	<section wood:content="section">
		<h2>Section Title</h2>
		<p>Section content...</p>
	</section>
</embed>

Fragment Syntax

For templates with a single editable element there is shorter syntax using a single operator wood:template="template/page#section". Syntax for this operator is using URL fragment notation with hash (#) separator, hence its name.

It declares both template path and the editable name with a single operator. Also there is no need for embed root element.

  • page/index/index.htm
<!-- content component -->
<!-- component root element is also content element -->
<section class="section" wood:template="template/page#section" xmlns:wood="js-lib.com/wood">
	<h2>Section Title</h2>
	<p>Section content...</p>
</section>

Note that in this case attributes declared on root element are merged with editable element attributes from template. Remember that attributes of embed root element are ignored.

Inline Fragment

Template fragment syntax can also be used for inline templating. Here we provide inline content for template template/article that has an editable element section.

<!-- parent component -->
<body xmlns:wood="js-lib.com/wood">
	<h1>Body Title</h1>
	<!-- inline template -->
	<article wood:template="template/article#section">
		<!-- inline content -->
		<h2>Section Title</h2>
		<p>Section content...</p>
	</article>
	<footer>copyright (c) 2022</footer>
</body>

For details see Inline Template.

Last updated 9/5/2022.

⚠️ **GitHub.com Fallback** ⚠️