Download to read offline
![●tag/edit.tag
commandsタグからリクエストパラメータでTODOデータのIDを受け
取っているくらいです。
コメントアウトを解除して、更新画面が表示されることを確認してくだ
さい。
riot.route(function(collection, id){
riot.mount('route', collection || 'home', {id: id})
})
edit() {
riot.route(`edit/${opts.todo.id}`)
}
opts.form = store.todos.filter(function(s){return s.id == opts.id})[0]](https://image.slidesharecdn.com/riotjs-160916032529/75/Riotjs-39-2048.jpg)
![[D3]サーバーレスでサービスを作ってみた話](https://cdn.slidesharecdn.com/ss_thumbnails/d3-161107044903-thumbnail.jpg?width=640&height=640&fit=bounds)
Riotjsハンズオン
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. ●カスタム・タグ Viewと対になるScriptを、一つのタグに定義したものです。 HTML Custom Tag HTML <p>{this.hoge}</p> Script let name= ‘hoge’ Custom Tag HTML Script
- 8.
- 9.
- 16.
- 17.
- 18. ●ルーティング 当TODOアプリにおいては、URLの変更を検知→URLの状態を受け取り、 callback関数にてカスタム・タグをマウントさせています。 // 例えば、‘todo/1000/edit’にアクセスすると // collection=‘todo’;id=‘1000’; action=’edit’がバインドされる riot.route(function(collection, id, action){ riot.mount('route', collection || 'home', {id: id}) })
- 19.
- 20.
- 21.
- 22.
- 23. ●このハンズオンの注意点 Google Chromeで起動すると下記のエラーが発生し、正常に動作しない 可能性があります。 riot+compiler.min.js:2 XMLHttpRequestcannot load file://hoge- hoge/riotjs_todo/tags/home.tag. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome- extension, https, chrome-extension-resource. その際は、Google Chrome起動時に`--allow-file-access-from-files`を 引数を指定して起動するか、Firefoxなどの別のブラウザでお試し下さい。
- 24.
- 25. ●ローカル環境で動かしましょう - https://github.com/omiend/riotjs_todo - Zipダウンロード→ 解凍 git clone git@github.com:omiend/riotjs_todo.git でもどうぞ - index.htmlをブラウザで開く
- 26. ●構成 . ├── css │ ├──main.css // ページの整形用に │ ├── normalize.css // https://necolas.github.io/normalize.css/ │ └── skeleton.css // わたくしomiendが好きな、軽量CSSフレームワークです（ http://getskeleton.com/） ├── images │ └── riotjs.png // riotをイメージした画像 ├── index.html // ブラウザが一番初めに読み込む単純なHTMLファイルです ├── scripts │ └── app.js // ルーティングと、予め登録されたデータを格納しています └── tags // カスタム・タグを配置しているディレクトリです ├── add.tag // TODOデータの追加を行うカスタム・タグです ├── commands.tag // TODOデータに対して何らかの処理を行うコマンドを集めたカスタム・タグです ├── edit.tag // TODOデータを更新するためのフォームが定義されたカスタム・タグです ├── home.tag // ホーム画面を表示するための簡単なHTMLが定義されたカスタム・タグです ├── navi.tag // ナビバーの単純なHTMLが定義されたカスタム・タグです └── todo.tag // TODOデータを一覧したりなど、TODOアプリの基盤画面を定義したカスタム・タグです
- 27. ●/index.html ブラウザで一番初めに読み込むファイルです。 内容は単純なHTMLですが、下記の要素が定義されています。 // カスタムタグがマウントされるセレクター 名称はrouteでなくても良いです <route></route> //Riot.js本体と、コンパイラをCDNで読み込み <script src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js"></script> // ルーティングなどの読み込み <script src="scripts/app.js" defer></script>
- 28.
- 29. ●tag/home.tag ルーティング設定によって、「/」にアクセスされた時に<route>にマウ ントされるタグです。 同タグ内のScriptにて‘Riot.js’という値を返す関数「echo()」が定義され ています。 「<h5>I Love {this.echo()}!</h5>」にて当該関数を実行し、 ‘Riot.js’を受け取ってレンダリングしています。 単純な例ですが、カスタム・タグの基本がわかると思います。
- 30.
- 31.
- 32.
- 33. ●tag/commands.tag commandsタグは、TODOデータに対してアクションを行うボタンを提 供するために実装したカスタム・タグです。 - editTagを<route>にマウントさせるために呼び出される関数。 - フラグを更新する関数。 -TODOデータを削除する関数を定義しています。 一つのカスタム・タグが、各行で各TODOデータのみを利用する動きと なっており、コンポーネントの再利用を意識した作りとしています。
- 34.
- 35.
- 36.
- 37. ●tag/add.tag storeに対する'refresh'イベントが発火されると、todoタグに定義された 下記のcallback関数が実行され、todoタグが自身を更新し、TODO一覧 に追加したTODOデータが表示されるという仕組みになっています。 var self =this // callbackの中でtodoタグを参照するため store.on('refresh', function(){ self.update() // todoタグを更新 })
- 38.
- 39. ●tag/edit.tag commandsタグからリクエストパラメータでTODOデータのIDを受け 取っているくらいです。 コメントアウトを解除して、更新画面が表示されることを確認してくだ さい。 riot.route(function(collection, id){ riot.mount('route', collection|| 'home', {id: id}) }) edit() { riot.route(`edit/${opts.todo.id}`) } opts.form = store.todos.filter(function(s){return s.id == opts.id})[0]
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.