Meteorで画面遷移を実装する(泥臭い感じ)
Posted by hikaruworld : 2012 9月 12
最近Meteorで遊んでいます。
簡単にプログラムできて楽しいのですが、
Meteorは基本的には画面遷移を持たない構成が前提になっているらしく、
画面遷移を実装するためには少し工夫する必要があります。
Meteorのテンプレート機能にはif文などの制御文を書く事が可能です。
今回はこの制御文とSessionを介したReactiveProggramingモデルを使って、
Sessionに状態を格納して画面遷移を制御します。
index.htmlに以下の様に定義します。
// index.html
<body>
{{> state}}
</body>
<template name="state">
{{#if state_is "login"}}{{> login}}{{/if}} // LOGIN状態の場合
{{#if state_is "main"}}{{> main{{/if}} // MAIN状態の場合
</template>
<template name="login">
<h3>ログイン</h3>
</template>
<template name="main">
<h3>メイン画面</h3>
</template>
javascriptでstate_isの関数を定義します
// index.js
/** 引数に指定した状態とSessionに格納した状態が同じ場合にtrueを返す */
Template.state.state_is = function(state) {
return Session.get("STATE") === state;
}
あとは、Sessionに状態を設定すると画面が遷移します。
デベロッパーツールなどのjavascriptコンソールでSession#setで値を設定してみます。
Session.set("STATE", "login");
Session.set("STATE", "main");
ちなみにmeteor.comにデプロイもしてみました。
ちなみにこちらのサイト(英語)が参考になりました。
以上です。
ひよっこ。 
コメントを残す