Meteor Guideでおすすめされるeach-inについて (Blaze)

Meteor Guideが出ました。Meteor公式ブログでアナウンスされています。

これをすべて紹介したいところですが、今回は一つのトピックに絞って紹介します。特にeach-inはおすすめされていますので、注目したいところです。Meteor Guideは今後も改版される予定なので、執筆時点での情報であることにご注意ください。

テンプレート挿入時のデータコンテキストに名前をつける

参照先はこちら。

テンプレートにデータコンテキストを指定するときにオブジェクトをそのまま指定するのは楽です。今までは、次のようにしていたことでしょう。

1	{{> Todos_item todo}}

しかし、これは次のように名前をつけて明示した方がよいです。

1	{{> Todos_item todo=todo}}

これが推奨される主な理由は下記です。

名前をつけることでその内部テンプレートでデータにアクセスするこが明確になる。つまり、{{title}}よりも{{todo.title}}の方が分かりやすい。
将来的に新しい要素を渡す場合に柔軟性がある。

例えば、Todos_itemの内部テンプレートで新しい引数を与えたい場合に、前者の{{> Todos_item todo}}の方法だと大変になります。

さらに、より分かりやすくするのためにテンプレート挿入時は常に明示的にデータコンテキストを指定すべきです。具体的には、

1	{{> myTemplate}}

とするとデータコンテキストを継承してしまうため、

1	{{> myTemplate ""}}

として明示的に空のデータコンテキストを渡す方がよいでしょう。

参照先はこちら。

上記と同じ理由で、eachについても、従来の

1	{{#each todos}}

ではなく、

1	{{#each todo in todos}}

を使う方がよいでしょう。後者の方式では、todoだけを持つオブジェクトがデータコンテキストに渡されるため、外部のデータコンテキストにアクセスしにくくすることができます。

後者の方式を使わない方がよい唯一の理由は、イベントハンドラ内でtodoのシンボルにアクセスすることが難しいことです。典型的にはこの問題は単に内部テンプレートを使うことで解決します。

参照先はこちら。

{{#let}}ヘルパーはテンプレート内でサブプロパティを取り出すのに便利です。JavaScriptの通常のletキーワードと同じように使います。

1
2
3

{{#let name=person.bio.firstName color=generateColor}}
  <div>{{name}} gets a {{color}} card!</div>
{{/let}}

ここで、nameとcolorはこのテンプレートのスコープに追加されただけで、データコンテキストに追加されたわけではありません。つまりへルパー関数を呼んだ場合にはこれらは現れません。ヘルパー関数からアクセスしたい場合は、明示的に引数に指定する必要があります。

1
2
3

{{#let name=person.bio.firstName color=generateColor}}
  {{> person (getPersonInfo name color)}}
{{/let}}

例えば、上記のようにします。getPersonInfoがヘルパー関数です。

一言で言えば、{{#each}}の代わりに{{#each .. in}}を、{{#with}}の代わりに{{#let}}を使いましょうという話です。

現時点ではFull APIのドキュメントにこれは記載されていませんのでご注意ください。

個人的にはBlazeのdata contextは分かりにくいと思っていたので、とてもいい方向だと思っています。今回は紹介しませんでしたが、Template.instance()の利用も推奨されていて、”this-less” JavaScriptで記述ができるようになってきました。