ヒントとコツ
エディタと IDE
テンプレートは Latte に対応したエディタや IDE で書きましょう。作業がずっと快適になります。
- PhpStorm:
Settings > Plugins > Marketplaceで Latte プラグインをインストールします - VS Code: Nette Latte + Neon、Nette Latte templates、または最新の Nette for VS Code プラグインをインストールします
- NetBeans IDE: Latte のネイティブサポートが標準で含まれています
- Sublime Text 3: Package Control で
Netteパッケージを探してインストールし、View > Syntaxで Latte を選びます - 古いエディタでは、
.latteファイルに Smarty のハイライトを使います
PhpStorm 用のプラグインは非常に高機能で、PHP コードの優れた補完を提供してくれます。最大限に活用するには型付きテンプレートを使ってください。
Latte のサポートは、ウェブ用のコードハイライター Prism.js やエディタ Ace にもあります。
JavaScript や CSS の中の Latte
Latte は JavaScript や CSS の中でもとても快適に使えます。とはいえ、JavaScript のコードや CSS のスタイルを Latte が誤ってタグとみなしてしまう状況は、どう避ければよいでしょうか。
<style>
/* エラー: タグ {color} と解釈される */
body {color: blue}
</style>
<script>
// エラー: タグ {id} と解釈される
var obj = {id: 123};
</script>
方法 1
{
の直後に文字が続く状況を避けます。たとえば前にスペース、改行、引用符を入れます。
<style>
body {
color: blue
}
</style>
<script>
var obj = {'id': 123};
</script>
方法 2
n:syntax を使って、その要素の中では Latte タグの処理を完全に無効にします。
<script n:syntax="off">
var obj = {id: 123};
</script>
方法 3
その要素の中だけ、Latte タグの構文を二重波かっこに切り替えます。
<script n:syntax="double">
var obj = {id: 123}; // これは JavaScript
{{if $cond}} alert(); {{/if}} // これは Latte のタグ
</script>
JavaScript では変数を引用符で囲まないでください。
Latte における use 句の代わり
クラスにアクセスするたびに名前空間を書かずに済むよう、PHP の use
句にあたるものを Latte ではどう代用すればよいでしょうか。PHP の例です。
use Pets\Model\Dog;
if ($dog->status === Dog::StatusHungry) {
// ...
}
方法 1
use 句の代わりにクラス名を変数に入れておき、Dog の代わりに
$Dog を使います。
{var $Dog = Pets\Model\Dog::class}
<div>
{if $dog->status === $Dog::StatusHungry}
...
{/if}
</div>
方法 2
$dog オブジェクトが Pets\Model\Dog
のインスタンスなら、{if $dog->status === $dog::StatusHungry} と書けます。
Latte による XML の生成
Latte は任意のテキスト形式（HTML、XML、CSV、iCal
など）を生成できますが、表示するデータを正しくエスケープするには、どの形式を生成しているのかを伝える必要があります。そのために
{contentType} タグを使います。
{contentType application/xml}
<?xml version="1.0" encoding="UTF-8"?>
...
たとえば、同じようにしてサイトマップを生成できます。
{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>
インクルードしたテンプレートからのデータの受け渡し
インクルードされたテンプレートの中で {var} や {default}
で作られた変数は、そのテンプレートの中にしか存在せず、インクルードした側のテンプレートからは使えません。インクルードされたテンプレートから呼び出し側にデータを返したい場合、ひとつの方法はオブジェクトをテンプレートに渡し、その中にデータを入れることです。
メインのテンプレート:
{* 空のオブジェクト $vars を作る *}
{var $vars = (object) null}
{include 'included.latte', vars: $vars}
{* ここではプロパティ foo を持っている *}
{$vars->foo}
インクルードされるテンプレート included.latte:
{* プロパティ foo にデータを書き込む *}
{var $vars->foo = 123}