Tips and Tricks

Editors and IDE

Write templates in an editor or IDE that has support for Latte. It will be much more pleasant.

  • NetBeans IDE has built-in support
  • PhpStorm: install the Latte plugin in Settings > Plugins > Marketplace
  • VS Code: search markerplace for “Nette Latte + Neon” plugin
  • Sublime Text 3: in Package Control find and install Nette package and select Latte in View > Syntax
  • in old editors use Smarty highlighting for .latte files

The plugin for PhpStorm is very advanced and can perfectly suggest PHP code. To work optimally, use typed templates.

Support for Latte can also be found in the web code highlighter Prism.js and editor Ace.

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>

In JavaScript, do not put variable in quotes.

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::StatusHungry) {
	// ...
}

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::StatusHungry}
		...
	{/if}
</div>

Option 2

If the object $dog is an instance of Pets\Model\Dog, then {if $dog->status === $dog::StatusHungry} 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}
version: 3.0