LOG

Mithril.js勉強会1回目のメモ

記事の作成日15/08/21
Mithrilのバージョン0.2.0
次回の記事Mithril.js勉強会2回目のメモ
  • アプリケーションは名前空間の中に作り、コンポーネントを入れていく。
  • コンポーネントとはページやその一部を表す単なる構造体であり、controllerとviewの2つのメソッドを含むオブジェクトのこと。
// 名前空間:myApp
let myApp = {
    // myModuleコンポーネント
    myModule : {
        controller(){},
        view(){}
    }
}
  • m.prop()はgetter-setterを提供するファクトリ。
let val = m.prop('hoge');
console.log(val);
// -> function prop();

console.log(val());
// -> hoge

val('fuga');
console.log(val());
// -> fuga
  • viewをレンダリングするにはm.renderを使う。
  • virtualDOMの仕組みを持っているので、何度renderしても変更されたところのみ描画される(コストが低い)。
    ↑補足:デフォルトではコントローラーが初期化されればゼロから再描画、イベントハンドラであれば差分描画。
// HTML
<ul id="card-set"></ul><br /><br />
// JavaScript
m.render(
    $('ul#card-set')[0],
    ['hoge','fuga','piyo'].map((val,i)=>{
        return m('li',[
            m('h1',val),
            m('dl',[
                m('dt','No.'+i),
                m('dd',[
                    m('input')
                ])
            ])
        ])
    })
);
  • Mithrilはデータは常にモデルからビューに流れるという原則のもとに設計されている。
  • デフォルトではコントローラーが初期化されればゼロから再描画、イベントハンドラであれば差分描画。
  • 短時間で何度も再描画が行われるような処理があれば、それらの再描画はまとめられ、単一のアニメーションフレーム(16ミリ秒)に最大1回のみ再描画される。
  • 描画制御のためのフックが用意されている(別記事に記載)。
  • m.mountを使うとイベントハンドラによる再描画が発生する。
    m.renderとは違い、第2引数にコンポーネントを指定する。
    ↑補足:コンポーネントの定義がcontrollerとviewを含むオブジェクトなので別々のものでもよい
let cardSet = {
    controller(){
        this.card = {
            'hoge' : m.prop('hoge default text.'),
            'fuga' : m.prop('fuga default text.'),
            'piyo' : m.prop('piyo default text.')
        }
    },
    view(controller){
        let card = controller.card;
        return Object.keys(card).map((val,i)=>{
            return m('li',[
                m('h1',val),
                m('dl',[
                    m('dt','No.'+i),
                    m('dd',[
                        m('input[type=text]',{ oninput : m.withAttr('value',card[val]) }),
                        m('br'),
                        card[val]()
                    ])
                ])
            ])
        })
    }
}

m.mount($('ul#card-set')[0],cardSet);