Template Partials

Avik Biswas edited this page Jan 25, 2017 · 6 revisions

Template Partials

In Transphporm, anything can be a partial. You can extract any element from any template and use it as a partial and place it inside any other element. This level of flexibility simply isn't possible with other template engines!

Partials in their own files

You can store a template partial in its own file. For example, sidebar.xml

<ul>
	<li><a href="/home">Home</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/contact">Contact</a></li>
</ul>

Then pull it into layout.xml:

<!DOCTYPE html>
<html>
	<head>
		<title>My Website</title>
	</head>

	<body>
		<nav>

		</nav>

		<main>

		</main>

		<footer>
       
		</footer>

	</body>

</html>

And pull sidebar.xml into the nav element in layout.xml using the following TSS:

nav {content: template('sidebar.xml');

Which will generate:

<!DOCTYPE html>
<html>
	<head>
		<title>My Website</title>
	</head>

	<body>
		<nav>
			<ul>
				<li><a href="/home">Home</a></li>
				<li><a href="/about">About</a></li>
				<li><a href="/contact">Contact</a></li>
			</ul>
		</nav>

		<main>

		</main>

		<footer>
       
		</footer>

	</body>

</html>

Extracting partials from complete files

Alternatively, you can extract any element from any file and use it as a partial. For example consider two complete XML files.

For example, you might want two variants of the navigation. These can be stored in their own XML file, sidebar.xml:

<?xml version="1.0"?>
<template>

	<ul class="standard">
		<li><a href="/home">Home</a></li>
		<li><a href="/about">About</a></li>
		<li><a href="/contact">Contact</a></li>
	</ul>

	<ul class="admin">
		<li><a href="/home">Home</a></li>
		<li><a href="/about">About</a></li>
		<li><a href="/contact">Contact</a></li>
		<li><a href="/admin">Adminstration</a></li>
		<li><a href="/admin/logout">Log out</a></li>
	</ul>
</template>

Here we have the admin navigation and the standard user navigation stored in a file as a partial. It's possible to pull in one of the two <ul> elements using a CSS selector as the second argument to the template function. To pull in the admin menu:

nav { content: template('sidebar.xml', 'ul.admin'); }

Or the standard menu:

nav { content: template('sidebar.xml', 'ul.standard'); }

This is particularly useful when using conditional logic:

nav:data[isAdmin=true] {content: template('sidebar.xml', 'ul.admin'); }
nav:data[isAdmin=false] {content: template('sidebar.xml', 'ul.standard'); }

Which will include a different block from sidebar.xml depending on the value of $data->isAdmin.

Unprecedented flexibility with partials

Anything can be used as partial. You can use element {content: template(filename, targetElement); } to select any targetElement from any file and insert it into any matched element on the page. This is not possible in traditional template engine as anywhere you need to include a partial you must include code inside the template.

You could create an XML "include" capability using the {content: template(filename, targetElement); } syntax, as shown in the following example.

In your layout XML file:

<div>
    <include href="foo.xml" />
</div>

In your TSS file:

include {content: template(attr(href)); content-mode: replace; }
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.