Meteorでshow/hideを簡単に書けるようにするパッケージを作った

  • 投稿日:
  • by

Meteorの標準テンプレートであるBlazeはシンプルで割と気に入っています。 最低限の機能が用意されていて、あとは自分でがんばってねという感じが悪くないです。 ただ、Angularに慣れてしまうとこんなことはできないのかなどと思うことがあります。

その一つが、ng-showみたいなこと。ng-clickと合わせて表示を切り替えることがしばしばあります。

Blazeでは{{#if}}を使うと似たようなことができます。これはおそらくng-if相当です。具体的には次のようになります。

<template name="foo">
  {{#if hello}}
    <p>Hello World!</p>
  {{/if}
</template>

Template.foo.helpers({
  hello: function() {
    return Session.get('hello');
  }
});

さらに表示を切り替えるボタンは例えば次のようになります。

<template name="bar">
  <button>Toggle</button>
</template>

Template.bar.events({
  'click button': function(event) {
    event.preventDefault();
    Session.set('hello', !Session.get('hello'));
  }
});

ちなみに、AngularだとHTML内にロジックを書いてしまえば次のように書けます。

<p ng-if="hello">Hello World!</p>
<button ng-click="hello = !hello">Toggle</button>

そこで、Blazeでも簡単に書けるようにするパッケージを作ってみました。

https://atmospherejs.com/daishi/blaze-showhide

これを使うと、

<div>
  {{#showIf name="hello"}}
    <p>Hello World!</p>
  {{/showIf}}
  {{#toggleShowHide name="hello"}}
    <button>Toggle</button>
  {{/toggleShowHide}}
</div>

こんな感じで書けるようになります。Sessionはアプリで共通なので実際に使う場合は他のtemplateと競合しないように注意する必要があります。

ng-ifやng-showを使いたいのならangular-meteorを使えばよいのではないかという意見もありますが、それはそれとしてBlazeでもパッケージでこういうやり方ができるということが分かりました。

余力があればやってみたいことは、ng-show相当の機能や設定のカスタマイズなどです。 余力というかモチベーションですが。

ところで、既に似たような機能を持つパッケージがないか探したのですが、見つかりませんでした。 もしかしたら、探し方が不十分であるパッケージの一機能として実現されているものもあるかもしれません。 いずれにしてもパッケージ作りの勉強になりました。