Nette Documentation Preview

syntax 
ヒントとコツ
******
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

ヒントとコツ

エディタとIDE

Latteに対応したエディタやIDEでテンプレートを書きましょう。より快適になるはずです。

  • PhpStorm：LatteプラグインをインストールするSettings > Plugins > Marketplace
  • VS Code: Nette Latte + Neon、Nette Latteテンプレート、または最新のNette for VS Codeプラグインをインストールしてください。
  • NetBeans IDEにはサポートが組み込まれています。
  • Sublime Text 3: パッケージコントロールでNette パッケージを検索してインストールし、Latteを選択します。View > Syntax
  • 古いエディタでは、.latte ファイルに Smarty ハイライトを使用します。

PhpStormのプラグインは非常に高度で、PHPコードを完全に示唆することができます。最適に動作させるためには、型付きテンプレートを使用します。

Latteのサポートは、ウェブコードハイライターPrism.jsとエディタAceでも見ることができます。

Latte インサイドの JavaScript または CSS

LatteはJavaScriptやCSSの内部でとても快適に使うことができます。しかし、LatteがJavaScriptのコードやCSSのスタイルをLatteのタグと誤認しないようにするにはどうしたらよいのでしょうか。

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

<script>
	// ERROR: interprets as tag {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};          // this is JavaScript

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

JavaScriptでは、変数を引用符で囲まないでください。

use 節の代わり

PHPで使われているuse 節を、クラスにアクセスする際に名前空間を書かなくてもいいように代用するにはどうしたらいいでしょうか。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を生成する

ラテはあらゆるテキスト形式（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} で作成した変数はインクルード・テンプレートの中にのみ存在し、インクルード・テンプレートでは使用できません。 インクルードテンプレートからインクルードテンプレートにデータを戻したい 場合、テンプレートにオブジェクトを渡し、それにデータをセットする方法があり ます。

メイン・テンプレート

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

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

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

同梱のテンプレートincluded.latte:

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