基本トピック
上級トピック
その他
ツール
HTML→Mithrilテンプレートコンバータ
もしすでにHTMLを作成済みで、それをMithirlのテンプレートに変換したい場合は、一度だけマニュアルの変換しかできませんが、下記のツールを使うことができます。
自動HTML→Mithirilテンプレートコンバータ
Jonathan Buchananが作成したMSX というツールがあります。これを使うとHTMLの文法を使ったテンプレートが作成できます。ファイルを変更すると自動でJavaScriptにコンパイルします。
このツールは、スタイリングと機能の実装が異なるチームで行われていて、テンプレートのメンテナンスにHTML文法が使いたい場合に便利です。
このツールを使うと、次のようなコードが書けます:
todo.view = function() {
return <html>
<body>
<input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
<button onclick={app.vm.add}>追加</button>
</body>
</html>
};
上記のコードはJavaScriptとして正しい文法ではありませんが、このコードはGulp.jsなどで提供されているプリプロセッサのビルドツールから読み込まれます。
このツールは、 Jordan Humphreysが作成したRails gemでも提供されています。
Mithrilテンプレートコンパイラ
Mithirlのテンプレートは事前にコンパイルすることでさらに高速にすることができます。詳細についてはこのページを参照してください。
TypeScriptサポート
TypeScriptにMithrilサポートを追加する型定義ファイルもあります。
これを使用するには、TypeScriptファイルに参照を追加します。コンパイラがMithril API呼び出しに対して型チェックが行えるようになります。
/// <reference path="mithril.d.ts" />
Internet Explorerの互換性
MithrilはArray::indexOf、Array::map、Object::keys、JSONオブジェクトなどのECMAScript 5の機能を使っています。Internet Explorer 8では、これらの機能のうちのいくつかが使えません。
次のスクリプト(polyfillと呼ばれる互換性向上コード)を読み込ませるのがもっとも簡単な補完方法です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.3/es5-shim.min.js"></script>
このライブラリはブラウザで必要とされるすべての足りない機能を追加します。特定の
<script src="http://cdn.polyfill.io/v1/polyfill.min.js?features=Array.prototype.indexOf,Object.keys,Function.prototype.bind,Array.prototype.forEach,JSON"></script>
IE7をサポートするためには他のPolyfillが使えます。
ES5 Shimもしくは、MozillaのArray::indexOf、Array::map、Object::keys
MithrilはXMLHttpRequestにも依存しています。もしIE6をサポートするには、そのクラスのシミュレートコードが必要になります。IE7以下のブラウザは、クロスドメインのAJAXリクエストをサポートしていません。
また、多くのm.routeモードは、ブラウザをリフレッシュしないで他のページにジャンプするためにhistory.pushStateを使用しています。IE9とそれ以下のブラウザはこの機能をサポートしていないため、リフレッシュが発生します。