プログラミング/riot.js/古い内容 の変更点

更新 
[[プログラミング/riot.js]]

* 覚えにくい点をメモ [#ndc106d3]

- カスタムタグのスクリプト内に於いて、this 変数は常に「現在のタグのインスタンス」を指します。などというときの「タグのインスタンス」は、「カスタムタグに関連づけられたデータオブジェクト」のこと。← これとても重要
-- タグに相当する DOM エレメントは this.root で参照する
- <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 を呼んでおけばよしなにしてくれる
- 

* ドキュメントのバグ [#cfe335ea]

** イベントハンドラでの e.target [#c1036157]

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

** プリプロセッサの説明へのリンクが壊れている [#sd142b7d]

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

* コンパイルできる環境を作るには [#tb254405]

riot のタグを slim + sass + coffeescript で書きたい

[[プログラミング/nvm]] のように nvm 経由で Node.js と npm を入れて、

 LANG:console
 $ rvm use
  Using /home/osamu/.rvm/gems/ruby-2.4.3
 $ gem install slim sass coffee-script
 $ nvm use
 $ npm init
 $ npm install riot uglify-js
 $ riot --version
    riot-cli:      4.0.1 - https://github.com/riot/cli
    riot-compiler: 3.4.0 - https://github.com/riot/compiler
 $ mkdir riot_tags
 $ cat > riot_tags/raw.tag.slim
  raw
    span
  
    coffee:
      @root.innerHTML = opts.content
 $ cat riot_tags/* | slimrb -ps | riot -io | uglifyjs -o public/riot_tags.js

こんな感じでうまく行きそうなんだけれど、

たしか、slimrb がタグとタグとの間の改行を消してしまうことがあって、
そのせいで riot がエラーを吐く場合があった気がする。

 LANG:console
 $ cat riot_tags/* | slimrb -ps | sed -e 's/></>\n</g' | riot -io | uglifyjs -o public/riot_tags.js

とか、

 LANG:console
 $ npm install html
 $ cat riot_tags/* | slimrb -ps | html | riot -io | uglifyjs -o public/riot_tags.js

とかで何とかすればいいのだっけ？

あれ、これだとファイルの末尾が空行でないとおかしな事になるな。。。
Counter: 784 (from 2010/06/03), today: 2, yesterday: 2