m.mount
マウントは、コンポーネントをDOMエレメントにレンダリングするプロセスです。
m.mountとm.renderの違いは、m.mountの場合は自動再描画システムがイベントハンドラから起動されるが、m.renderは起動しない点です。
もし、複数のページ間でユーザをナビゲーションをして、その時にコンポーネントのロード/リロードを行いたい場合は、m.routeを代わりに使用してください。
コンポーネントのレンダリング
使用方法
m.mountを呼ぶ時は、DOMエレメントを最初の引数に設定し、2つ目の引数にコンポーネントを設定します。まずコンポーネントのcontroller関数が呼ばれ、次にview関数が呼ばれます。controller関数の返り値は、view関数の最初の引数として渡されます。
var MyComponent = {
controller: function() {
return {greeting: "Hello"}
},
view: function(ctrl) {
return m("h1", ctrl.greeting)
}
}
m.mount(document.body, MyComponent)
//<body><h1>Hello</h1></body>
より詳細な情報はm.componentを参照してください。
シグニチャ
Object mount(DOMElement rootElement, Component component)
where:
Component :: Object { Controller, View }
Controller :: SimpleController | UnloadableController
SimpleController :: void controller([Object attributes [, any... args]])
UnloadableController :: void controller([Object attributes [, any... args]]) { prototype: void unload(UnloadEvent e) }
UnloadEvent :: Object {void preventDefault()}
View :: void view(Object controllerInstance [, Object attributes [, any... args]])
DOMElement rootElement
ビューのテンプレートの結果が作成されるDOMエレメント。
Component component
コンポーネントは、
controllerとviewのキーを持つオブジェクトです。このどちらの属性も、JavaScriptの関数でなければなりません。もしコントローラが省略されると、Mithrilは自動的に空のコントローラ関数を補完します。m.mountが呼ばれると、controller関数が実行されて、それがm.mountの返り値になります。コントローラコードの実行が完了すると(AJAXのリクエストの完了待ちも含む)ビュークラスのインスタンスが作られ、ビューのコンストラクタにコントローラのインスタンスが渡されます。
returns Object controllerInstance
コントローラコンストラクタのインスタンス。