【Monaca】Riot.js + Onsen UI V2 ons-navigatorで画面遷移する

「シンプル体重管理」や「ナンバーズサーチ」など、これまでAngularJSとOnsen UIの組み合わせでアプリ開発を行ってきたが、ユーザー側から「重い」「遅い」などの声が上がってきており、以前から軽いと評判のRiot.jsというUIライブラリを使用してアプリ開発できないだろうか・・・と思いつつも時間だけが経過。
やっと重い腰を上げてみた。

riot.js.org

Riot.js — シンプルでエレガントなコンポーネントベースの UI ライブラリ · Riot.j...

https://riot.js.org/ja/

Riot.jsでは、簡単で楽しい構文を使ってカスタムタグを使ったユーザーインターフェイスを構築できます。

今回は、Onsen UIの基本的な動きであるons-navigatorで画面遷移を試みる。

MonacaクラウドIDEで、「Onsen UI V2 JS Minimum」を作成し、最新版の「riot+compiler.min.js」を[/www/lib/liotjs/]フォルダにアップロードする。
このとき「+」がスペースに置き換わる場合があるので「名前を変更」でファイル名を修正する。
[/www/tag/]フォルダに各tagファイルを作成する。

はまったところは、Onsen UIのtemplate、ons-page、ons-toolbarの間にRiot.jsのカスタムタグを入れると、Onsen UIのコンテンツ領域が正しく設定されない、CSSが適用されない点。
いろいろと試した結果、下記のようなコードとなった。

Android 6.0.1

iOS 10.3.3

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function () {
      console.log("Onsen UI is ready!");
      window.myNavigator = document.getElementById("navigator");
    });
  </script>
</head>
<body>
  <ons-navigator id="navigator" animation="slide" page="page1.html"></ons-navigator>

  <template id="page1.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Page1</div>
        <div class="right"><ons-toolbar-button onclick="window.myNavigator.pushPage('page2.html')"><ons-icon icon="md-plus"></ons-icon></ons-toolbar-button></div>
      </ons-toolbar>
      <div id="content-page1" class="content"></div>
      <script>
        riot.mount(document.getElementById("content-page1"), "page1");
      </script>
    </ons-page>
  </template>

  <template id="page2.html">
    <ons-page>
      <ons-toolbar>
        <div class="left"><ons-back-button></ons-back-button></div>
        <div class="center">Page2</div>
      </ons-toolbar>
      <div id="content-page2" class="content"></div>
      <script>
        riot.mount(document.getElementById("content-page2"), "page2");
      </script>
    </ons-page>
  </template>

  <script type="riot/tag" src="tag/page1.tag"></script>
  <script type="riot/tag" src="tag/page2.tag"></script>
  <script type="text/javascript" src="lib/riotjs/riot+compiler.min.js"></script>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

ons.ready(function () {

console.log("Onsen UI is ready!");

window.myNavigator = document.getElementById("navigator");

});

</script>

</head>

<body>

<ons-navigator id="navigator" animation="slide" page="page1.html"></ons-navigator>

<ons-page>

<ons-toolbar>

</ons-toolbar>

riot.mount(document.getElementById("content-page1"), "page1");

</script>

</ons-page>

</template>

<ons-page>

<ons-toolbar>

</ons-toolbar>

riot.mount(document.getElementById("content-page2"), "page2");

</script>

</ons-page>

</template>

</body>

</html>

page1.tag

<page1>
  <ons-list>
    <ons-list-item modifier="chevron" tappable="true" each="{item in items}" onclick={showPage.bind(this, item.name)}>
      {item.name}
    </ons-list-item>
  </ons-list>
  <ons-fab position="bottom right" class="fab-plus" onclick={showPage.bind(this, "")}><ons-icon icon="md-plus"></ons-icon></ons-fab>
  <script>
    this.items = [
      { name:"sato" },
      { name:"suzuki" },
      { name:"takahashi" },
      { name:"tanaka" },
      { name:"ito" }
    ];
    this.showPage = function (name) {
      var param = {
        name: name
      };
      window.myNavigator.param = param;
      window.myNavigator.pushPage("page2.html");
    };
  </script>
  <style>
    .fab-plus {
      color: #fff;
      background-color: #faa;
    }
  </style>
</page1>

<page1>

<ons-list>

<ons-list-item modifier="chevron" tappable="true" each="{item in items}" onclick={showPage.bind(this, item.name)}>

{item.name}

</ons-list-item>

</ons-list>

<ons-fab position="bottom right" class="fab-plus" onclick={showPage.bind(this, "")}><ons-icon icon="md-plus"></ons-icon></ons-fab>

this.items = [

{ name:"sato" },

{ name:"suzuki" },

{ name:"takahashi" },

{ name:"tanaka" },

{ name:"ito" }

];

this.showPage = function (name) {

var param = {

name: name

};

window.myNavigator.param = param;

window.myNavigator.pushPage("page2.html");

};

</script>

<style>

.fab-plus {

color: #fff;

background-color: #faa;

}

</style>

</page1>

page2.tag

<page2>
  <ons-list>
    <ons-list-item>
      <ons-input value={param.name}></ons-input>
    </ons-list-item>
    <ons-list-item>
      <ons-button modifier="large" class="button-ok">O K</ons-button>
    </ons-list-item>
  </ons-list>
  <script>
    this.param = window.myNavigator.param;
  </script>
  <style>
    .button-ok {
      margin-right: 10px;
      color: #fff;
      background-color: #faa;
    }
  </style>
</page2>

<page2>

<ons-list>

<ons-list-item>

<ons-input value={param.name}></ons-input>

</ons-list-item>

<ons-list-item>

<ons-button modifier="large" class="button-ok">O K</ons-button>

</ons-list-item>

</ons-list>

this.param = window.myNavigator.param;

</script>

<style>

.button-ok {

margin-right: 10px;

color: #fff;

background-color: #faa;

}

</style>

</page2>

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

【Monaca】Riot.js + Onsen UI V2 ons-navigatorで画面遷移する

シンプル体重管理簡單體重管理简单体重管理 Ver.1.8.0をリリースしました！

【Monaca】JavaScript + Onsen UI V2 選択したデータを前画面に渡す

【Monaca】Riot.js + Onsen UI V2 ons-navigatorで画面遷移する

Recommended Posts

【Cordova】App Storeの審査が通りませんでした・・・

【Cordova】admob-plusプラグインにおいて広告が表示されない場合の対処方法

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法