Mithril.js でちょっとはまった(いや、かなり)

Mithril.jsを始めてみて、早速というか、すごく初歩的な事かもしれないけど

バーチャルDOMという事での罠にはまりました。

バーチャルDOMはバーチャルな訳ですよ。

バーチャル

ということは、実際にリアルにはそこに無いわけで

何を言っているかわからないと思うが

もう少し具体例を出すと

Mithril.jsで動的にul・liのリスト構造を表示させる。

このul・liの各アイテムは、ドラッグ&ドロップ出来るようにする。

ドラッグ&ドロップは、sortable.jsという感じの別のjsライブラリを使う。

といった感じでリストを出力したいと思います。

このリストをドラッグ&ドロップにしたいときに、最初は上記のように

m.mountの行の下に置いてみました。

この場合、たまに動くけど、たまに動かないといった微妙な挙動になり、結構悩みました。

で、よくよく考えたら、m.mountをした時点でバーチャルがギリギリリアルになっていないのではないか?

という事でした。

たぶんこれはビンゴで、実際どのように解決したのかというと

mというメソッドの第2パラメータにconfigアトリビュートを追加します。

configというのは、リアルDOMの描画が終わった後に処理をさせたい内容を定義できる特殊なアトリビュートという事のようです。

先ほどのコードを、このような形に修正することで、

$(‘#sortedList’)が実際に描画された後に、sortableLoadというメソッドが呼び出されるようになります。

めでたし!

Mithril.js 始めました

Mithril.js はじめました。

https://lhorie.github.io/mithril/

今回、社内で使う管理画面の一部に、動的な制御入れたいな~という要望があり

その要望に対して自前で作ると

データの流れとかを考えたときにかなりややこしくなりそうだなと思い

それならクライアントサイドのjavascriptフレームワークを使おう、という事で

React.jsとMithril.jsで比較検討しました。

比較内容としては、他のサイトでも出ていると思うので、それはググっていただくとして

今回自分がMithril.jsを選んだ理由

それは学習コストが低い!

これにつきると思います。

どう低いのか?というと

mithril-doc

覚えるメソッドがこれだけです。

サンプルコードそのままですが

これだけで、bodyに動的にレンダリングしてくれます。

m.componentの書き方とか、非同期でリクエスト取りに行ったりするであるとか

書き方として覚えなければいけない部分はありますが、それでも

他のフレームワークと比べて簡単に導入できました。

次回以降、使ってみた感想というか、はまった場所、解決方法etcなどを順次上げていけたらと思います。