Tips and Tricks

Latte inside JavaScript or CSS

Latte can be used very comfortably inside JavaScript or CSS. But how to avoid Latte mistakenly considering JavaScript code or CSS style to be a Latte tag?

<style>
	/* ERROR: interprets as tag {color} */
	body {color: blue}
</style>

<script>
	// ERROR: interprets as tag {id}
	var obj = {id: 123};
</script>

Option 1

Avoid situations where a letter immediately follows a {, either by inserting a space, line break or quotation mark between them:

<style>
	body {
		color: blue
	}
</style>

<script>
	var obj = {'id': 123};
</script>

Option 2

Completely turn off the processing of Latte tags inside an element using n:syntax:

<script n:syntax="off">
	var obj = {id: 123};
</script>

Option 3

Switch the Latte tag syntax to double curly braces inside element:

<script n:syntax="double">
	var obj = {id: 123};          // this is JavaScript

	{{if $cond}} alert(); {{/if}} // this is Latte tag
</script>

Printing a Variable in JavaScript

Thanks to context-sensitive escaping, it is wonderfully easy to print variables inside JavaScript, and Latte will properly escape them. Do not quote variable, because the value of the variable does not have to be a string.

<script>
	alert({$name});
</script>

If you want to put the variable into another string, simply concatenate them:

<script>
	alert('Hello ' + {$name} + '!');  // OK

	alert('Hello {$name} !');         // ERROR!
</script>

Replacement for use Clause

How to substitute the use clauses used in PHP so that you don't have to write a namespace when accessing a class? PHP example:

use Pets\Model\Dog;

if ($dog->status === Dog::STATUS_HUNGRY) {
	...
}

Option 1

Instead of clause use store the class name in a variable and then instead of Dog use $Dog:

{var $Dog = Pets\Model\Dog::class}

<div>
	{if $dog->status === $Dog::STATUS_HUNGRY}
		...
	{/if}
</div>

Option 2

If the object $dog is an instance of Pets\Model\Dog, then {if $dog->status === $dog::STATUS_HUNGRY} can be used.

Generating XML in Latte

Latte can generate any text format (HTML, XML, CSV, iCal, etc.), however, in order to properly escape the displayed data, we must tell it which format we are generating. The {contentType} tag is used for this.

{contentType application/xml}
<?xml version="1.0" encoding="UTF-8"?>
...

Then, for example, we can generate a sitemap in a similar way:

{contentType application/xml}
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" >
	<url n:foreach="$urls as $url">
		<loc>{$url->loc}</loc>
		<lastmod>{$url->lastmod->format('Y-m-d')}</lastmod>
		<changefreq>{$url->frequency}</changefreq>
		<priority>{$url->priority}</priority>
	</url>
</urlset>

Passing Data from an Included Template

The variables that we create with {var} or {default} in the included template exist only in it and are not available in the including template. If we want to pass some data from the included template back to the including one, one of the options is to pass an object to the template and set the data to it.

Main template:

{* creates an empty object $vars *}
{var $vars = (object) null}

{include 'included.latte', vars: $vars}

{* now contains property foo *}
{$vars->foo}

Included template included.latte:

{* write data to the property foo *}
{var $vars->foo = 123}
Improve this page