YOSHINO日記

プログラミングに関すること

Ember.js入門17: yieldを使ってコンポーネント を入れ子構造にしてみる

2つのコンポーネントを用意する

入れ子構造で利用するコンポーネントを用意します。

$ ember g component big-list

#  create app/components/big-list.js
#  create app/templates/components/big-list.hbs

$ ember g component small-list

#  create app/components/small-list.js
#  create app/templates/components/small-list.hbs

yieldで呼び出したい場所を決めておく。

app/templates/components/big-list.hbs

from big header
{{yield}}
from big footer

ちなみに呼び出される側。

app/templates/components/small-list.hbs

<p>from small</p>

コンポーネントを呼び出す。

app/templates/application.hbs

{{#big-list}}
  {{small-list}}
{{/big-list}}

{{outlet}

以下のようにブラウザに表示されます。

from big header

from small

from big footer