Handlebars

# インタラクティブな例の作成

インタラクティブな例を定義することができます。例または例の一部は、どのページにも埋め込むことができます。自動生成されたリンクにより、訪問者はプレイグラウンドで例を開くことができます。プレイグラウンドでは、テンプレート、パーシャル、入力などを変更して、結果の出力を見ることができます。

# 例の作成

例を定義するには、`examples` ディレクトリに新しい Markdown ファイルを作成します。サンプルデータは、参照されるサンプルページのフロントマターで定義されます。すべての機能の完全なデモについては、all-features-example-raw を参照してください。

以下のフロントマタープロパティがサポートされています

  • `layout`：常に `InteractivePlaygroundLayout` でなければなりません
  • `example`：例を含みます
    • `template`：メインの Handlebars テンプレート
    • `partials`：登録されている各パーシャルのプロパティを持つオブジェクト。キーはパーシャル名、値はパーシャルの内容です
    • `preparationScript`：テンプレートをコンパイルして実行する前に実行されるスクリプト。`Handlebars` は、このスクリプトではグローバル変数として使用できます。
    • `input`：埋め込まれた YAML オブジェクトとしてのテンプレート入力。
    • `errorExpected`：この例がエラーをスローすることが予想されることを指定するブール値（デフォルト：`false`）。デフォルトでは、実行中にエラーをスローする例は、サイト全体のビルドを失敗させます。エラーを説明する例を作成する場合は、このフラグを `true` に設定する必要があります。

例の出力は、Handlebars の最新リリースバージョンを使用して自動的に計算されます。

# サンプルデータ

可能であれば、例では共通のデータセットのバリエーションを使用する必要があります。そのため、ファイル src/examples/_example-base-data.yaml (新しいウィンドウが開きます) には、再利用して各例に適用できるデータが含まれています。そのファイルのデータが不十分な場合は、新しいデータを追加してください。ただし、何らかの形で関連していることを確認してください。

# 例の一部を埋め込む

`<ExamplePart>` コンポーネントを使用すると、現在の部分に例の一部を表示できます。

<ExamplePart examplePage="/examples/builtin-helper-each-block" show="template"/>

は、次のようになります

template プレイグラウンドで表示
<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

このコンポーネントのプロパティは次のとおりです

  • `examplePage`：`src` フォルダー以下のサンプルページへのパス
  • `show`：ページに挿入する例の一部。可能な値は、`template`、`input`、`output`、`error`、`preparationScript`、および `partial` です
  • `name`（オプション）：このプロパティは、`show="partial"` の場合にのみ必要です。例に挿入するパーシャルの名前を定義します。

このコンポーネントは、例の各部分を流れるようなテキストに埋め込みたい場合に非常に便利です。`<ExamplePart examplePage="/examples/all-features" show="input" />` を使用して入力 JSON を挿入すると、次のコードスニペットがページに表示されます

input プレイグラウンドで表示
{
  persons: [
    { name: "Nils", age: 20 },
    { name: "Teddy", age: 10 },
    { name: "Nelson", age: 40 },
  ],
}

次に、読者にテンプレートを表示するには、同じ `examplePage` で `show="template"` を使用できます。

template プレイグラウンドで表示
{{>header}}
<hr/>
{{#each persons}}
{{>person person=.}}
{{/each}}

`show=partial` と `name=person` を使用してパーシャルをレンダリングできます

partial: person プレイグラウンドで表示
The person {{loud person.name}} is {{person.age}} years old.

ヘルパー付きの例がある場合は、準備スクリプトを含めることもできます

preparationScript プレイグラウンドで表示
Handlebars.registerHelper('loud', function (aString) {
    return aString.toUpperCase()
})

# 横方向のレイアウト

2 つのサンプルパーツを横方向にレイアウトする場合は、`<Flex>` コンポーネントを使用できます。

<Flex>
<ExamplePart examplePage="/examples/builtin-helper-each-block" show="template"/>
<ExamplePart examplePage="/examples/builtin-helper-each-block" show="input"/>
</Flex>

は、次のようになります

template プレイグラウンドで表示
<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>
input プレイグラウンドで表示
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}
最終更新日: 2020年2月22日 午後9時51分21秒

← ボタンリンク →