レンダリング制御メソッド
「m.startComputation」と「m.endComputation」
MithrilはDOMの描画を最小限に抑えるため、データの変更と完了を監視するシンプルなAPIが用意されています。それが、「m.startComputation」と「m.endComputation」です。
まずは簡単な利用例を見てみましょう。
var myCtrl = function(){
var that = this;
this.text = m.prop("first");
//レンダリング通知されない例
setTimeout(function(){
that.text = m.prop("setTimeout");
},1000);
//レンダリング通知される例
setTimeout(function(){
m.startComputation();
that.text = m.prop("setTimeout2");
m.endComputation();
},2000);
};
「m.startComputation」で監視を開始して「m.endComputation」で監視を終了し、Viewのレンダリング通知を行います。
このAPIは「m.mount」「m.route」「m.request」、DOMのイベント実行処理の内部でも使用されています。そのため、Mithril側で自動的にレンダリング通知を行ってくれるのは、初回実行時、非同期通信時、イベント実行時の3パターンとなっています。上記例のような非同期処理する場合は、自らレンダリング通知メソッドを呼ぶ必要性があります。
m.redraw
監視ではなく強制的にレンダリング通知する場合に使用します。
var myCtrl = function() {
var that = this;
this.text = m.prop("first");
setTimeout(function(){
that.text("setTimeout");
m.redraw(true);
},2000);
};
m.redraw.strategy
Mithrilには3つのレンダリングモードがあります。Mithrilの自動レンダリングの際に適切なものに切り替わるようになっています。
| モード | 説明 | 適応タイミング |
|---|---|---|
| all | 全DOMを更新 | 初回レンダリング時 |
| diff | 差分を検知しDOMを更新 | 初回レンダリング後の変更時 |
| none | 更新しない | - |
「m.redraw.strategy」を使うことで、現在のレンダリングモードの取得と変更が可能です。
var myCtrl = function() {
var that=this;
this.text = m.prop("first");
console.log(m.redraw.strategy()); //-> all
m.redraw.strategy("none");
console.log(m.redraw.strategy()); //-> none
setTimeout(function(){
that.text("setTimeout");
console.log(m.redraw.strategy()); //-> diff
m.redraw(true);
},2000);
};
最後に
今回は基礎編ということで、Mithrilの紹介をさせていただきました。Mithrilは、APIが15個と極めて少ないのですが、「別のサードパーティ製のライブラリなしでもサイト構築が可能」と言える程、便利なAPIがそろっています。次回はコンパイラの紹介とコンポーネント機能、サードパーティ製ライブラリの利用方法を紹介する予定です。
LINE株式会社ではJavaScriptエンジニアを募集しています。私たちと一緒にプラットフォーム・グローバル展開を発展させていきたい方はぜひご応募ください。
