プログラミング/riot.js の履歴(No.3)
更新覚えにくい点をメモ†
- カスタムタグのスクリプト内に於いて、this 変数は常に「現在のタグ(=カスタムタグ)のインスタンス」を指します。→ これどういうことだ?
- <style type="riot"></style> を置くことで、riot が css を挿入する位置を指定できる。
(type って text/css じゃないものが書かれていても大丈夫なんだっけ???) - カスタムタグを利用する際は<todo></todo>のように閉じられる必要があります。自己終了タグ<todo/>はサポートしません。
- this.refsオブジェクトに続くref属性を持つ要素へのアクセス って何だっけ?
- タグのライフサイクル
- タグが構成される
- タグのJavaScriptロジックが実行される
- テンプレート変数が計算され、"before-mount" イベントが発火
- ページ上でタグがマウントされ、"mount" イベントが発火
- 次のいずれかで update される。
その際、"update" イベントで値を計算し、html 更新後に "updated" が発火- Observable な変数が変更された際自動的に (e.preventUpdateをtrueにセットしない場合)
- this.update()が現在のタグインスタンス上で呼ばれたとき
- this.update()が親タグあるいは、さらに上流のタグで呼ばれたとき。更新は親から子への一方通行で流れる。
- riot.update()が呼ばれたとき。ページ上のすべてのテンプレート変数を更新。
- unmount() が呼ばれれば、'before-unmount' の後に 'unmount' が発火
- イベント名に一貫性がないことに注意が必要
"mounting", "mounted", "updating", "updated", "unmounting", "unmounted" などだったら覚えやすいのに - コンパイラ入り riot を使う場合は、<script src="todo.js" type="riot/tag"></script> の形で tag を呼んでおけばよしなにしてくれる
ドキュメントのバグ†
イベントハンドラでの e.target†
http://riotjs.com/ja/guide/#イベントハンドラ
では、
- e.currentTarget は、イベントハンドラが指定された要素を指します
- e.targetはイベントの送信元エレメントです。これは必ずしも必要ではなく、currentTarget と同じです。
と書かれているのだけれど、
e.currentTarget がイベントハンドラが指定された要素であるのに対して、
e.target はイベントが発生した要素になることがあるようでした。
http://jsbin.com/tiqoyehaco/edit?html,output
こちらの黄色い枠の上へマウスカーソルを持って行くと
e.target が A 要素なのに対して
e.currentTarget が DIV 要素になることが分かります。
で、確かめてみると英語の説明は
- e.currentTarget points to the element where the event handler is specified.
- e.target is the originating element. This is not necessarily the same as currentTarget.
で、e.target の説明を日本語にする際に誤訳していたことが分かりました。
修正を PR しました。
https://github.com/riot/riot.github.io/pull/191
プリプロセッサの説明へのリンクが壊れている†
http://riotjs.com/ja/guide/#%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5
「プリプロセッサ」からの飛び先は、
- http://riotjs.com/ja/guide/#%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5 ではなく
- http://riotjs.com/ja/guide/compiler/#%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5 であるべき
PR するために準備中。
https://github.com/osamutake/riot.github.io/commit/766b8e6124797bf6641300356eb5ed1b7135c389