Volt Introduction and Docs

Yield バインディング

タグを使用する場合、呼び出し元が生成したコンテンツをタグの定義に渡すことができます。 言い換えると、タグの定義は呼び出し元のコンテンツを参照することができます。これは Ruby の yield と同様のロジックですが、わすかに異なるところがあります。以下にシンプルな例を紹介します。

シンプルなリストのナビゲーションアイテムがあって、それを再利用したいとします。

<li>
    <a href="/about">
      <span class="nav_element"> About </span>
    </a>
</li>

これは簡単にタグに変換することが可能で、リンクとテキストを attrs を利用することで渡すことができます。しかし、これは span 要素の場合にはイマイチです。そういった場合には、 yield バインディングを利用する方がより良い方法です。

<:Nav>
    <li>
        <a href="{{ attrs.href }}">
            <span class="nav_element"> {{ yield }} </span>
        </a>
    </li>

このタグをページの最初のアウトプットとして追加したい場合は以下のようにします。

<:nav href="/about">About</:nav>

上記の例で、"About" は {{ yield }} の場所にレンダリングされます。 通常、タグに含まれるコンテンツはすべて yield の場所にレンダリングされます。

もし、HTMLのコンテンツを単純に文字列として取得したい場合には、コントローラーでyield_htmlを実行してください。これは、必要に応じて.watch!を設定することが可能な文字列を返します。そして、コンテンツの更新にしたがって再度レンダリングされます。