riot.js入門：最低限のコードで出来ることを確認する

ちょっと前から気になってたriot.jsを理解するために、なるべく少なめのコードを書いてみた。
解説は全部まとめてソースコードに書いておく。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>riot.js テスト用</title>
    <style>
        body{
            margin: 0 16px;
        }
    </style>
    <!-- riot.js のライブラリを読み込む -->
    <script src="https://cdn.jsdelivr.net/riot/2.4/riot+compiler.min.js"></script>
    <!-- サーバーへのデータのポストはjQueryのajaxメソッドを使う感じ -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body>
<!-- appタグのところに、↓のscript内で定義しているappタグの内容が反映される -->
<app></app>
<script type="riot/tag">
  <app>
    <!-- appタグ内だけで動作するcssスタイル。appタグ外では適用されない -->
    <style scoped>
    ul{
      margin: 0 -16px;
      background-color: #ccc;
    }
    li{
      padding: 8px 16px;
      list-style: none;
      display: inline-block;
    }
    a:visited,
    a{
      color: #000;
    }
    </style>
    <!-- MVCらしく コントローラ / メソッド / パラメータ・・・みたいな感じにしておく。 -->
    <ul>
      <li><a href='/route_path/sub_folder/home/index/1/2'>home</a></li>
      <li><a href='/route_path/sub_folder/blog'>blog</a></li>
      <li><a href='/route_path/sub_folder/contact'>contact</a></li>
    </ul>
    <content></content>

    // ここから処理される。ここからコメントの形式が変わるのがちょっと分かりづらかった

    // ルートフォルダを以下省略できる。
    // route_path/sub_folderを適当に替えてください。
    riot.route.base("/route_path/sub_folder/");

    // ルーティング処理。上で定義したURL以下の内容に応じて処理を分岐させる
    // 今回はベース＞コントローラ＞メソッド＞パラメータ１＞パラメータ２
    riot.route(function(controller, method, param1, param2) {
      // コントローラーが定義されていなかった場合はhomeコントローラとする
      // ※baseのパスを指定した場合はhomeって感じ
      controller = controller || 'home';
      // メソッドが指定されていない場合はindexとする
      // baseのパス＋コントローラ指定されてた場合
      method = method || "index";

      // ルーティングで指定した内容をパラメータとして渡せる。
      opts = {controller,method,param1,param2};

        // なぜかsetTimeoutで動作を遅延させないと、ブラウザの更新ボタンを押したときに
        // うまく反映されなかった
        setTimeout(function() {
          // 指定した内容のタグ名を作って読み込む。パラメータとしてoptsを渡す
          riot.mount('content', controller+"_"+method, opts);
          // 画面を更新する
          riot.update();
        }, 200);
    });
    // おまじない
    riot.route.start(true);
  </app>

<!-- homeをクリックした時の動作 -->
<home_index>
<h2>ホーム画面</h2>
<!-- ルーティング処理から渡された引数は、opts.〜で取得できる -->
<p>controller: { opts.controller }</p>
<p>method: { opts.method }</p>
<p>param1: { opts.param1 }</p>
<p>param2: { opts.param2 }</p>

<!-- クリックイベントで引数を渡したい場合は、↓みたいにbindを使うといい感じ。 -->
<!-- "tg1","tg2"の部分が引数になる -->
<a href="target" onclick={tg.bind(this,"tg1")}>ターゲット1</a>
<a href="target" onclick={tg.bind(this,"tg2")}>ターゲット2</a>
<p class="targettext"></p>

// ここはターゲット１・２をクリックしたときの処理で↑のpタグを適当に書き換えるだけ。
tg(target) {
$(".targettext").html(target);
}
</home_index>

<!-- blogをクリックした時の処理 -->
<blog_index>
<h2>blog</h2>
<p>ブログです </p>
</blog_index>

</script>

<!-- タグは外部ファイルに定義してもOK。なるべく絶対パスのほうが都合がいい -->
<!-- route_path/sub_folderを適宜変更してください。 -->
<script type="riot/tag" src="/route_path/sub_folder/tag/contact/index.tag"></script>

<!-- おまじない -->
<script>
    riot.mount('*');
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<html>

<head>

<style>

body{

margin: 0 16px;

}

</style>

</head>

<body>

<app>

ul{

margin: 0 -16px;

background-color: #ccc;

}

li{

padding: 8px 16px;

list-style: none;

display: inline-block;

}

a:visited,

color: #000;

}

</style>

<ul>

<li><a href='/route_path/sub_folder/contact'>contact</a></li>

</ul>

// ここから処理される。ここからコメントの形式が変わるのがちょっと分かりづらかった

// ルートフォルダを以下省略できる。

// route_path/sub_folderを適当に替えてください。

riot.route.base("/route_path/sub_folder/");

// ルーティング処理。上で定義したURL以下の内容に応じて処理を分岐させる

// 今回はベース＞コントローラ＞メソッド＞パラメータ１＞パラメータ２

riot.route(function(controller, method, param1, param2) {

// コントローラーが定義されていなかった場合はhomeコントローラとする

// ※baseのパスを指定した場合はhomeって感じ

controller = controller || 'home';

// メソッドが指定されていない場合はindexとする

// baseのパス＋コントローラ指定されてた場合

method = method || "index";

// ルーティングで指定した内容をパラメータとして渡せる。

opts = {controller,method,param1,param2};

// なぜかsetTimeoutで動作を遅延させないと、ブラウザの更新ボタンを押したときに

// うまく反映されなかった

setTimeout(function() {

// 指定した内容のタグ名を作って読み込む。パラメータとしてoptsを渡す

riot.mount('content', controller+"_"+method, opts);

// 画面を更新する

riot.update();

}, 200);

});

// おまじない

riot.route.start(true);

</app>

<home_index>

<h2>ホーム画面</h2>

<p>controller: { opts.controller }</p>

<p>method: { opts.method }</p>

<p>param1: { opts.param1 }</p>

<p>param2: { opts.param2 }</p>

<a href="target" onclick={tg.bind(this,"tg1")}>ターゲット1</a>

<a href="target" onclick={tg.bind(this,"tg2")}>ターゲット2</a>

// ここはターゲット１・２をクリックしたときの処理で↑のpタグを適当に書き換えるだけ。

tg(target) {

$(".targettext").html(target);

}

</home_index>

<blog_index>

<p>ブログです </p>

</blog_index>

</script>

riot.mount('*');

</script>

</body>

</html>

<IfModule mod_rewrite.c>
RewriteEngine On
# 環境に合わせて route_path/sub_folder を変更のこと
RewriteBase /route_path/sub_folder/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . ./index.php [L]
</IfModule>

RewriteEngine On

# 環境に合わせて route_path/sub_folder を変更のこと

RewriteBase /route_path/sub_folder/

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . ./index.php [L]

</IfModule>

【参考サイト】
riot.js公式
http://riotjs.com/ja/

とりあえず試してみたいって方のための Riot.js 入門 | phiary
http://phiary.me/riotjs-tutorial-try/

はじめてのRiot.js | CYOKODOG
http://www.cyokodog.net/blog/riot/

Riot.jsのonclickでテンプレートから引数を渡す方法 | murakamikoji.com
http://murakamikoji.com/riot-onclick-arguments/