122 lines
No EOL
4.9 KiB
HTML
122 lines
No EOL
4.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Mithril</title>
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
|
<link href="lib/prism/prism.css" rel="stylesheet" />
|
|
<link href="style.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="container">
|
|
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
|
<a href="getting-started.html">Guide</a>
|
|
<a href="mithril.html">API</a>
|
|
<a href="community.html">Community</a>
|
|
<a href="mithril.min.zip">Download</a>
|
|
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col(3,3,12)">
|
|
<h2 id="api">API (v0.1.2)</h2>
|
|
<h3 id="core">Core</h3>
|
|
<ul>
|
|
<li><a href="mithril.html">m</a></li>
|
|
<li><a href="mithril.prop.html">m.prop</a></li>
|
|
<li><a href="mithril.withAttr.html">m.withAttr</a></li>
|
|
<li><a href="mithril.module.html">m.module</a></li>
|
|
<li><a href="mithril.trust.html">m.trust</a></li>
|
|
<li><a href="mithril.render.html">m.render</a></li>
|
|
<li><a href="mithril.redraw.html">m.redraw</a></li>
|
|
</ul>
|
|
<h3 id="routing">Routing</h3>
|
|
<ul>
|
|
<li><a href="mithril.route.html">m.route</a>
|
|
<ul>
|
|
<li><a href="mithril.route.html#defining-routes">m.route(rootElement, defaultRoute, routes)</a></li>
|
|
<li><a href="mithril.route.html#redirecting">m.route(path)</a></li>
|
|
<li><a href="mithril.route.html#mode-abstraction">m.route(element)</a></li>
|
|
<li><a href="mithril.route.html#mode">m.route.mode</a></li>
|
|
<li><a href="mithril.route.html#param">m.route.param</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h3 id="data">Data</h3>
|
|
<ul>
|
|
<li><a href="mithril.request.html">m.request</a></li>
|
|
<li><a href="mithril.deferred.html">m.deferred</a></li>
|
|
<li><a href="mithril.sync.html">m.sync</a></li>
|
|
<li><a href="mithril.computation.html">m.startComputation / m.endComputation</a></li>
|
|
</ul>
|
|
|
|
<h2 id="archive">History</h2>
|
|
<ul>
|
|
<li><a href="roadmap.html">Roadmap</a></li>
|
|
<li><a href="change-log.html">Change log</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col(9,9,12)">
|
|
<h2 id="m-render">m.render</h2>
|
|
<p>This method generates a DOM tree inside of a given HTML element.</p>
|
|
<p>If the method is run more than once with the same root element, it diffs the new tree against the existing one and intelligently modifies only the portions that have changed.</p>
|
|
<p>Note that, unlike many templating engines, this "smart diff" feature does not affect things like cursor placement in inputs and focus, and is therefore safe to call during user interactions.</p>
|
|
<hr>
|
|
<h3 id="usage">Usage</h3>
|
|
<p>Assuming a document has an empty <code><body></code> element, the code below:</p>
|
|
<pre><code class="lang-javascript">var links = [
|
|
{title: "item 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)
|
|
})
|
|
])
|
|
]);</code></pre>
|
|
<p>yields:</p>
|
|
<pre><code class="lang-markup"><body>
|
|
<ul class="nav">
|
|
<li>
|
|
<a href="/item1">item 1</a>
|
|
</li>
|
|
</ul>
|
|
</body></code></pre>
|
|
<hr>
|
|
<h3 id="signature">Signature</h3>
|
|
<p><a href="how-to-read-signatures.html">How to read signatures</a></p>
|
|
<pre><code class="lang-clike">void render(DOMElement rootElement, Children children)
|
|
|
|
where:
|
|
Children :: String text | Array<String text | VirtualElement virtualElement | Children children>
|
|
VirtualElement :: Object { String tag, Attributes attributes, Children children }
|
|
Attributes :: Object<Any | void config(DOMElement element)></code></pre>
|
|
<ul>
|
|
<li><p><strong>DOMElement rootElement</strong></p>
|
|
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
|
</li>
|
|
<li><p><strong>Children children</strong></p>
|
|
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
|
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
|
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
|
<br />© 2014 Leo Horie
|
|
</div>
|
|
</footer>
|
|
<script src="lib/prism/prism.js"></script>
|
|
</body>
|
|
</html> |