ビューの DOM ノードを取得する

Volt のバインディングだけで数多くのことができます。例えば、ビューの DOM を直接変更したいことがあるでしょう。DOM の直接操作は2つのパートに分けられます。

• 処理開始のタイミング
• コンテナの取得

処理開始のタイミング

Volt はクライアント上でページをレンダリングするため、jQuery で $(document).ready などを利用することはできません。(※Volt は jQuery を同梱しています) その代わりに、{action}_ready メソッドを使用してください。(詳細は コールバックとアクション を参照してください) 大きなビューの各パートに対してトリガーを設定するには、複数のコントローラー/ビューを使うようにビューを分割する必要があります (また、そうすべきです)。

DOM ノードの取得

他の多くのフレームワークと異なり、Volt のビューはルートに複数のノードを持つことができます。

<:Item>
    <td>{{ label }}</td>
    <td><a href="/edit/{{ id }}">Edit</a></td>

ビューの DOM レンジ

以下のケースでは、ビューの「ノード」を単純に取得することができません。その代わりに、Volt は Dom レンジ を利用してビュー内のノードを表現します。ビューのノードのレンジを得るには、コントローラー上で dom_nodes を実行してください。

コンテナノード

しかしながら、DOM レンジを扱うのは厄介です。理由は、(jQuery などの) ほとんどのライブラリはノードを扱うようになっているからです。近接しているノードを取得するには、コントローラー内で container を使用してください。(より役立つメソッドもありますので、もう少し読み進めてください)。

最初の要素

上記の例には2つの TD がありましたが、これはテーブルを返します。テーブルは、ビューに1つ以上の「ルート」ノードがある例において唯一の共通のノードです。以下のように、ビューのルートに1つのノードしかない場合を考えてください:

<:Post>
    <section>
        <h1>{{ title }}</h1>
        <p>{{ body }}</p>
    </section>

この例では、section タグがビュー全体の単一のルートノードです。しかし、空白文字の影響によって、厳密にはそれ以外のノードも存在します。したがって、container は section の上位ノードを返します。もし、ビューに1つのノードしかないことがわかっているのなら、first_element を使って、ビューの最初の要素のノードを取得できます。(要素のノードはタグです)