ひよっこ。

I want to…

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にデプロイもしてみました。

ちなみにこちらのサイト(英語)が参考になりました。

以上です。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。