Nette Documentation Preview

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


エディタとIDE .[#toc-editors-and-ide]
================================

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

- NetBeans IDEはサポートが組み込まれています
- PhpStorm：[Latteプラグ |https://plugins.jetbrains.com/plugin/7457-latte]インをインストールする`Settings > Plugins > Marketplace`
- VSコード：[Nette Latte + Neon |https://marketplace.visualstudio.com/items?itemName=Kasik96.latte]または[Nette Latteテンプレートプラグインの |https://marketplace.visualstudio.com/items?itemName=smuuf.latte-lang]markerplace検索
- Sublime Text 3: パッケージコントロールで`Nette` パッケージを検索してインストールし、Latteを選択します。`View > Syntax`
- 古いエディタでは、.latte ファイルに Smarty ハイライトを使用します。

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

[* latte-phpstorm-plugin.webp *]

Latteのサポートは、ウェブコードハイライター[Prism.jsと |https://prismjs.com/#supported-languages]エディタ[Aceでも |https://ace.c9.io]見ることができます。


Latte インサイドの JavaScript または CSS .[#toc-latte-inside-javascript-or-css]
======================================================================

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

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

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

**選択肢1**

文字と文字の間にスペース、改行、引用符を挿入することで、文字が `{` の直後に続くような状況を避けることができます。

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

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

**オプション 2**

[n:syntaxを |tags#syntax]使用している要素内のLatteタグの処理を完全にオフにします。

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

**オプション 3**

Latteタグの構文を、要素内の二重中括弧に切り替えます。

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

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

JavaScriptでは、[変数を引用符で |tags#Printing in JavaScript]囲まないでください。


`use` 節の代わり .[#toc-replacement-for-use-clause]
==============================================

PHPで使われている`use` 節を、クラスにアクセスする際に名前空間を書かなくてもいいように代用するにはどうしたらいいでしょうか。PHPの例です。

```php
use Pets\Model\Dog;

if ($dog->status === Dog::StatusHungry) {
	// ...
}
```

**オプション1**

`use` 節の代わりにクラス名を変数に格納し、`Dog` の代わりに`$Dog` を使用します。

```latte
{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を生成する .[#toc-generating-xml-in-latte]
==============================================

ラテはあらゆるテキスト形式（HTML、XML、CSV、iCalなど）を生成できますが、表示されるデータを適切にエスケープするためには、どの形式を生成しているのかをラテに伝える必要があります。そのために使われるのが [`{contentType}` |tags#contentType]タグを使用します。

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

すると、例えば、同じような方法でサイトマップを生成することができるのです。

```latte
{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>
```


インクルードされたテンプレートからのデータの受け渡し .[#toc-passing-data-from-an-included-template]
=========================================================================

`{var}` や`{default}` で作成した変数はインクルード・テンプレートの中にのみ存在し、インクルード・テンプレートでは使用できません。
インクルードテンプレートからインクルードテンプレートにデータを戻したい 場合、テンプレートにオブジェクトを渡し、それにデータをセットする方法があり ます。

メイン・テンプレート

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

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

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

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

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

ヒントとコツ

エディタとIDE

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

  • NetBeans IDEはサポートが組み込まれています
  • PhpStorm：LatteプラグインをインストールするSettings > Plugins > Marketplace
  • VSコード：Nette Latte + NeonまたはNette Latteテンプレートプラグインのmarkerplace検索
  • 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}