m.render
このメソッドは、DOMツリーを指定されたHTML属性内に定義します。
もしこのメソッドが、同じルートエレメントに対して2回以上呼ばれた場合には、このメソッドは新しいツリーと既存のツリーの差分を取り、変更のあった箇所だけ賢く更新します。
他のテンプレートエンジンとは異なり、この「賢い差分」機能は、入力フォームのカーソルやフォーカスに対して影響を与えません。しかし、いくつかの特殊なケースをうまく処理するために、差分検知アルゴリズムにkey属性を渡す必要があります。
使用方法
ドキュメントは空の<body>エレメントを持っているとします:
var links = [
{title: "アイテム 1", url: "/item1"}
];
m.render(document.body, [
m("ul.nav", [
m("li", links.map(function(link) {
return m("a", {href: link.url, config: m.route}, link.title)
}))
])
]);
生成される結果:
<body>
<ul class="nav">
<li>
<a href="/item1">アイテム 1</a>
</li>
</ul>
</body>
サブツリーディレクティブ
m.renderは、特別なSubtreeDirectiveオブジェクトを仮想DOMツリーのノードとして受け取ることができます。もし、ツリーが次のようなオブジェクトを含んでいると、Mithrilはこのノードに対する差分検知アルゴリズムを中断します。もし再描画間で差分が発生していないことが明示的にわかっている場合は、キャッシュと対になる仮想DOMツリーの生成の手間が省けるため、処理を最適化できます。もし、ビューに関するパフォーマンス上の問題が何もなければ、この機能は使わないでください。
{subtree: "retain"}
この機能は、パフォーマンスの最適化のための最終手段として用意されています。この機能を使う場合は、仮想DOMツリーのどこに変更があったか/なかったかについて、開発者が決定する責任を持つことになります。
下記の例は静的なヘッダーに対してサブツリーディレクティブをどのように使用するかのサンプルです。このようにすることで、一度レンダリングされた後は差分検出のコストが発生しません。こうすると、ヘッダーに関するサブツリーが作られなくなり、差分アルゴリズムもスキップしますが、ヘッダ内の動的な変数が更新されることもなくなります。
var app = {}
//どこのデータが変更されているかを決定するサンプルプラグイン
//この場合、初回だけ変更されてその後は変更されない
app.bindOnce = (function() {
var cache = {}
return function(view) {
if (!cache[view.toString()]) {
cache[view.toString()] = true
return view()
}
else return {subtree: "retain"}
}
}())
//here's the view
app.view = function() {
return m(".layout", [
app.bindOnce(function() {
//パフォーマンスの最適化のために、一度しか実行されない
//ここの動的変数は更新されない
return m("header", [
m("h1", "this never changes")
])
}),
//ここの動的変数は再描画のたびに更新される
m("main", "rest of app goes here")
])
}
シグニチャ
void render(DOMElement rootElement, Children children [, Boolean forceRecreation])
where:
Children :: String text | VirtualElement virtualElement | SubtreeDirective directive | Array<Children children>
VirtualElement :: Object { String tag, Attributes attributes, Children children }
Attributes :: Object<Any | void config(DOMElement element)>
SubtreeDirective :: Object { String subtree }
DOMElement rootElement
childrenで表現されるテンプレートの結果が入るDOMエレメント。Children children
この属性が文字列の場合は、テキストノードとしてレンダリングされます。文字列をHTMLとしてレンダリングしたい場合は、
m.trustを参照してください。もし仮想エレメントが指定された場合には、DOMエレメントとしてレンダリングされます。
配列だった場合には、配列の要素も再帰的にレンダリングされて、
rootエレメントの子供として追加されます。Boolean forceRecreation
もしこれがtrueに設定されると、差分検知せずに新しい仮想ツリーの完全なレンダリングが行われます。st it