"omiend"}ルーティングルーティングにはriot.routeを利用します。下記アクションでURLが変更されると、与えられたcallback関数を実行します。1.新しいURLが、ブラウザのロケーションバーに入力されたとき2.ブラウザの戻る/進むボタンが押されたとき3.route(to)が呼び出されたとき4.アンカータグがクリックされたとき当TODOアプリにおいては、URLの変更を検知→URLの状態を受け取り、callback関数にてカスタム・タグをマウントさせています。id})})参考までに、私は普段riot-routerを利用しています。riot-routerこちらも気になっています。独学なので、Riot.jsのお作法に則っていない可能性があります(お作法がアレば、の話ですが)Global変数をそのまま触っており(良くない)、JavaScriptについては割りと乱暴にお手軽に実装しています。※observableを利用して、fluxを取り入れるべきだなぁとは感じています。Chromeで起動すると下記のエラーが発生し、正常に動作しない可能性があります。Chrome起動時に--allow-file-access-from-filesを引数を指定して起動するか、Firefoxなどの別のブラウザでお試し下さい。chrome-extension-resource.Python(MacOSならば標準搭載)を利用し、SimpleServerを利用する手もあります。TODOデータを一覧したりなど、TODOアプリの基盤画面を定義したカスタム・タグですindex.htmlブラウザで一番初めに読み込むファイルです。内容は単純なHTMLですが、下記の要素が定義されています。defer></script>tag/navi.tagこちらは本当に単純なHTMLです。コメントアウトを解除し、画面にナビバーが表示されることを確認してください。表示されていれば、naviタグが正しくマウントされているということです。tag/home.tagルーティング設定によって、「/」にアクセスされた時ににマウントされるタグです。同タグ内のScriptにて‘Riot.js’という値を返す関数「echo()」が定義されています。‘Riot.js’を受け取ってレンダリングしています。単純な例ですが、カスタム・タグの基本がわかると思います。tag/todo.tagTODOアプリケーションの基盤的なカスタム・タグです。riotが提供するeachによってTODOデータをループし、表示しています。store.todos}>一行ごとにcommandsタグをマウントさせています。commandsタグはtodoという名前を引数として、ループ中のtodoを受け取っています。todo={todo}></commands>tag/commands.tagtodoタグから受け取ったTODOデータは、optsというriotが提供する特別な変数に格納されます。optsは、Reactで言う所のpropsのイメージです。-->commandsタグは、TODOデータに対してアクションを行うボタンを提供するために実装したカスタム・タグです。editTagをにマウントさせるために呼び出される関数。フラグを更新する関数。TODOデータを削除する関数を定義しています。一つのカスタム・タグが、各行で各TODOデータのみを利用する動きとなっており、コンポーネントの再利用を意識した作りとしています。tag/add.tagaddタグがマウントされるはtodoタグ内に定義されているので、addタグは子タグと呼べます。子タグは親タグ(todoタグ)がマウントされた後に初期化されます。TODO内容を入力し、ADDボタンがクリックされると、addタグに定義されたadd関数が実行され、storeに入力内容を保存します。イベントを発火させています。イベントが発火されると、todoタグに定義された下記のcallback関数が実行され、todoタグが自身を更新し、TODO一覧に追加したTODOデータが表示されるという仕組みになっています。http://riotjs.com/ja/api/observable/tag/edit.tagこれまでの説明以上の目新しいことはしていません。コメントアウトを解除して、更新画面が表示されることを確認してください。利用して受け取っています。1日目お題の通りです。(1)はてなブログをはじめよう!omiendさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。