fnobi/riot-sample.html

## riot-sample.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Riot Demo</title>
  </head>
  <body>
    <!-- ここに、yabaiのコンポーネントができてほしい -->
    <yabai></yabai>

    <!-- 「yabaiタグ」の定義 (外部ファイルに書いて、srcで読み込んでもよい) -->
    <script type="riot/tag">
      <yabai>
        <ul>
          <li each="{ list }">{ name }</li>
        </ul>

        <style scoped>
          :scope li {
            margin: 0.5em;
            padding: 0.5em;
          }
          :scope li:nth-child(3n+1) {
            color: #800;
          }
          :scope li:nth-child(3n+2) {
            color: #080;
          }
          :scope li:nth-child(3n+3) {
            color: #008;
          }
        </style>

        var words = opts.words;
        this.list = [];

        setInterval(function () {
            this.list.push({
                name: words[this.list.length % words.length]
            });
            this.update();
        }.bind(this), 1000);
      </yabai>
    </script>

    <!-- riot.js本体 -->
    <script src="https://cdn.jsdelivr.net/g/riot@2.0(riot.min.js+compiler.min.js)"></script>

    <!-- mount!! -->
    <!-- (<yabai>を書いていた部分に、定義したyabaiタグの振る舞いを実際に与える その際データを渡したりする) -->
    <script>
      riot.mount('yabai', {
          words: [ "やばい", "まじで", "はんぱない" ]
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<title>Riot Demo</title>
	</head>
	<body>
	<!-- ここに、yabaiのコンポーネントができてほしい -->
	<yabai></yabai>

	<!-- 「yabaiタグ」の定義 (外部ファイルに書いて、srcで読み込んでもよい) -->
	<script type="riot/tag">
	<yabai>
	<ul>
	<li each="{ list }">{ name }</li>
	</ul>

	<style scoped>
	:scope li {
	margin: 0.5em;
	padding: 0.5em;
	}
	:scope li:nth-child(3n+1) {
	color: #800;
	}
	:scope li:nth-child(3n+2) {
	color: #080;
	}
	:scope li:nth-child(3n+3) {
	color: #008;
	}
	</style>

	var words = opts.words;
	this.list = [];

	setInterval(function () {
	this.list.push({
	name: words[this.list.length % words.length]
	});
	this.update();
	}.bind(this), 1000);
	</yabai>
	</script>

	<!-- riot.js本体 -->
	<script src="https://cdn.jsdelivr.net/g/riot@2.0(riot.min.js+compiler.min.js)"></script>

	<!-- mount!! -->
	<!-- (<yabai>を書いていた部分に、定義したyabaiタグの振る舞いを実際に与えるその際データを渡したりする) -->
	<script>
	riot.mount('yabai', {
	words: [ "やばい", "まじで", "はんぱない" ]
	});
	</script>
	</body>
	</html>