Symfoware

Symfowareについての考察blog

Riot 最小構成のサンプルプログラム

Riot - Simple and elegant component-based UI library
http://riotjs.com/ja/

jQueryでDOM操作つらいなと思う時があるので、使い方を調べていこうと思います。


最小構成のサンプル



内容の理解はおいておいて、とりあえずサンプルを最小構成で動かしてみます。

こちらを参考に、本体のjsはCDNを参照することにしました。
Riotを手に入れよう!

riot+compiler.min.jsをリンクします。


準備するファイルは2つ。

・index.html


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot todo</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <style>
  10. .completed {
  11. text-decoration: line-through;
  12. color: #ccc;
  13. }
  14.     </style>
  15. </head>
  16. <body>
  17.     <todo></todo>
  18.     <script src="todo.tag" type="riot/tag"></script>
  19.     <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  20.     <script>
  21.     riot.mount('todo', {
  22.      title: 'I want to behave!',
  23.      items: [
  24.         { title: 'Avoid excessive caffeine', done: true },
  25.         { title: 'Hidden item', hidden: true },
  26.         { title: 'Be less provocative' },
  27.         { title: 'Be nice to people' }
  28.      ]
  29.     })
  30.     </script>
  31. </body>
  32. </html>





・todo.tag


  1. <todo>
  2. <h3>{ opts.title }</h3>
  3. <ul>
  4.     <li each={ items.filter(whatShow) }>
  5.      <label class={ completed: done }>
  6.         <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
  7.      </label>
  8.     </li>
  9. </ul>
  10. <form onsubmit={ add }>
  11.     <input ref="input" onkeyup={ edit }>
  12.     <button disabled={ !text }>Add #{ items.filter(whatShow).length + 1 }</button>
  13.     <button type="button" disabled={ items.filter(onlyDone).length == 0 } onclick={ removeAllDone }>
  14.     X{ items.filter(onlyDone).length } </button>
  15. </form>
  16. <!-- this script tag is optional -->
  17. <script>
  18.     this.items = opts.items
  19.     edit(e) {
  20.      this.text = e.target.value
  21.     }
  22.     add(e) {
  23.      if (this.text) {
  24.         this.items.push({ title: this.text })
  25.         this.text = this.refs.input.value = ''
  26.      }
  27.      e.preventDefault()
  28.     }
  29.     removeAllDone(e) {
  30.      this.items = this.items.filter(function(item) {
  31.         return !item.done
  32.      })
  33.     }
  34.     // an two example how to filter items on the list
  35.     whatShow(item) {
  36.      return !item.hidden
  37.     }
  38.     onlyDone(item) {
  39.      return item.done
  40.     }
  41.     toggle(e) {
  42.      var item = e.item
  43.      item.done = !item.done
  44.      return true
  45.     }
  46. </script>
  47. </todo>




これだけ。
ファイルを配置したディレクトリに移動し、pythonの簡易サーバーを起動しました。


$ python -m SimpleHTTPServer




ブラウザでhttp://localhost:8000を見てみると、こんな画面が表示されます。

736_01.png


簡単なTODOリストです。
コメントの追加や削除が行えます。





カスタムタグとmount



サンプルが動かせたので、ちょっとずつ使い方を調べていきます。

さらに最小構成のサンプルに変更してみました。
値を設定して表示するだけです。

・index.html


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot sample</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <my-tag></my-tag>
  12.     
  13.     <script src="my.tag" type="riot/tag"></script>
  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  15.     <script>
  16.     riot.mount('my-tag', {
  17.      title: 'はじめてのRiot',
  18.      description: 'タグの使い方を勉強中'
  19.     })
  20.     </script>
  21. </body>
  22. </html>




・my.tag


  1. <my-tag>
  2. <h3>{ opts.title }</h3>
  3. <div>{ opts.description }</div>
  4. </my-tag>





値を設定して表示するだけならscriptタグは不要でした。
デフォルトの変数optsに値がせっていされるので、そのまま表示してやります。

htmlに宣言するタグの名前と、tagスクリプト中のタグ名は一致させる必要がありました。

736_02.png



htmlファイル1つにまとめてしまいたい場合は、scriptタグ内に
直接カスタムタグを記載すれば良いようです。


・index.html


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot sample</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <my-tag></my-tag>
  12.     
  13.     <!-- タグの内容を直接記載 -->
  14.     <script type="riot/tag">
  15. <my-tag>
  16. <h3>{ opts.title }</h3>
  17. <div>{ opts.description }</div>
  18. </my-tag>
  19.     </script>
  20.     
  21.     <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  22.     <script>
  23.     riot.mount('my-tag', {
  24.      title: 'はじめてのRiot',
  25.      description: 'タグの使い方を勉強中'
  26.     })
  27.     </script>
  28. </body>
  29. </html>



scriptタグはhtmlタグ内に存在していればよく、bodyの外に追いやることもできるようです。
ただし、カスタムタグはmountの宣言より前に記載する必要があります。


・index.html


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot sample</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <my-tag></my-tag>
  12. </body>
  13. <!-- タグの内容を直接記載 -->
  14. <!-- riot.mountよりも前に記載 -->
  15. <script type="riot/tag">
  16. <my-tag>
  17. <h3>{ opts.title }</h3>
  18. <div>{ opts.description }</div>
  19. </my-tag>
  20. </script>
  21.     
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.2/riot%2Bcompiler.min.js"></script>
  23. <script>
  24. riot.mount('my-tag', {
  25. title: 'はじめてのRiot',
  26. description: 'タグの使い方を勉強中'
  27. })
  28. </script>
  29.     
  30. </html>



簡単なサンプルの場合、1ファイルにまとまっていたほうがわかりやすそうなので、
この記載方法で使い方を調べていこうと思います。
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/03/26(日) 17:31:39|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Riot ボタンクリック 表示非表示 ループ(イベントハンドラー,show,hide,if,each) | ホーム | C# exeファイルに後から設定値を埋め込む手法の検討>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1969-a1061ca3
この記事にトラックバックする(FC2ブログユーザー)