Onsen UI

Onsen UIにはUI機能はもちろん、ナビゲーションや画面遷移などのシステム的な機能も組み込まれている。 OnsenUIはオープンソースで提供されている。 Onsen UIではAngularJSというJavaScriptフレームワークが動作している。 AngularJS ではMVCデザインパターンが採用されていて、JavaScriptコードをモデル、ビュー、コントローラーに分けて記述する。 OnsenUI ver2 + AngularJS ver1系の組み合わせでやってみる。

Onsen UI Ver2のons-navigator内のpushPageでパラメータを渡す

Onsen UIにはUI機能はもちろん、ナビゲーションや画面遷移などのシステム的な機能も組み込まれていて、非常に便利である。 AngularJSに至っては、双方向データバインドは感動ものの便利さだ。ただ、いわゆるフレームワークを使うときは、最初慣れるまでのハードルがやや高い。 例えば、Onsen UI Ver2(+ AngularJS 1.5.x)のons-navigator内のpushPageでパラメータを渡す、という簡単なことでさえ、最初戸惑うこともある。

Onsen UI Ver2のons-navigator内のpushPageでパラメータを渡すには

Onsen UI Ver2のons-navigator内のpushPageでパラメータを渡すにはどうしたらいいか。 stackoverflowやいくつかのサイトで解説があるが、 Onsen UI ver1をベースにしていたり、AngularJSのcontrollerが登場したり(AngularJSに慣れていればそのほうがいいかもしれない)、 さらにng-repeat使ってたり(別にそれで構わないのだが)、受け渡すのがいきなり配列だったりするので、 Onsen UI Ver2のons-navigatorのpushPageを使ってパラメータを渡すという目的のためにはいささか話が広がり過ぎている感じがする。

Onsen UI Ver2のons-navigator内のpushPageでパラメータを渡す実際のコード

まずはおなじみons-navigatorのコードを書いおく。


呼び出し側のページ(page1.html)には次のコードを書く。

次のページへ

変数val1のなかに「test dayon」という文字列をセットしてpage2.htmlにpushPageしているわけである。 さて、page2.htmlではtopPageを利用してval1を呼び出せばよい。

変数の中身は{{navi.topPage.data.val1}}です

次のように表示されるはずである。

変数の中身はtest dayonです