mithril
Version:
A framework for building brilliant applications
106 lines (104 loc) • 4.17 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<title> redraw() - Mithril.js</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href="lib/prism/prism.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<section>
<a class="hamburger" href="javascript:;">≡</a>
<h1><img src="logo.svg"> Mithril <small>1.0.0</small></h1>
<nav>
<a href="index.html">Guide</a>
<a href="api.html">API</a>
<a href="https://gitter.im/lhorie/mithril.js">Chat</a>
<a href="https://github.com/lhorie/mithril.js">Github</a>
</nav>
</section>
</header>
<main>
<section>
<h1 id="redraw">redraw()</h1>
<ul>
<li>Core<ul>
<li><a href="hyperscript.html">m</a></li>
<li><a href="render.html">m.render</a></li>
<li><a href="mount.html">m.mount</a></li>
<li><a href="route.html">m.route</a></li>
<li><a href="request.html">m.request</a></li>
<li><a href="jsonp.html">m.jsonp</a></li>
<li><a href="parseQueryString.html">m.parseQueryString</a></li>
<li><a href="buildQueryString.html">m.buildQueryString</a></li>
<li><a href="withAttr.html">m.withAttr</a></li>
<li><a href="trust.html">m.trust</a></li>
<li><a href="fragment.html">m.fragment</a></li>
<li><strong><a href="redraw.html">m.redraw</a></strong><ul>
<li><a href="#description">Description</a></li>
<li><a href="#signature">Signature</a></li>
<li><a href="#how-it-works">How it works</a></li>
</ul>
</li>
<li><a href="version.html">m.version</a></li>
<li><a href="promise.html">Promise</a></li>
</ul>
</li>
<li>Optional<ul>
<li><a href="stream.html">Stream</a></li>
</ul>
</li>
<li>Tooling<ul>
<li><a href="https://github.com/lhorie/mithril.js/blob/rewrite/ospec">Ospec</a></li>
</ul>
</li>
</ul>
<hr>
<h3 id="description">Description</h3>
<p>Updates the DOM after a change in the application data layer.</p>
<p>You DON'T need to call it if data is modified within the execution context of an event handler defined in a Mithril view, or after request completion when using <code>m.request</code>/<code>m.jsonp</code>.</p>
<p>You DO need to call it in <code>setTimeout</code>/<code>setInterval</code>/<code>requestAnimationFrame</code> callbacks, or callbacks from 3rd party libraries.</p>
<p>Typically, <code>m.redraw</code> triggers an asynchronous redraws, but it may trigger synchronously if Mithril detects it's possible to improve performance by doing so (i.e. if no redraw was requested within the last animation frame). You should write code assuming that it always redraws asynchronously.</p>
<hr>
<h3 id="signature">Signature</h3>
<p><code>m.redraw()</code></p>
<table>
<thead>
<tr>
<th>Argument</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>returns</strong></td>
<td></td>
<td></td>
<td>Returns nothing</td>
</tr>
</tbody>
</table>
<hr>
<h3 id="how-it-works">How it works</h3>
<p>When callbacks outside of Mithril run, you need to notify Mithril's rendering engine that a redraw is needed. External callbacks could be <code>setTimeout</code>/<code>setInterval</code>/<code>requestAnimationFrame</code> callbacks, web socket library callbacks, event handlers in jQuery plugins, third party XHR request callbacks, etc.</p>
<p>To trigger a redraw, call <code>m.redraw()</code>. Note that <code>m.redraw</code> only works if you used <code>m.mount</code> or <code>m.route</code>. If you rendered via <code>m.render</code>, you should use <code>m.render</code> to redraw.</p>
<p>You should not call m.redraw from a <a href="lifecycle-methods.html">lifecycle method</a>. Doing so will result in undefined behavior.</p>
<hr />
<small>License: MIT. © Leo Horie.</small>
</section>
</main>
<script src="lib/prism/prism.js"></script>
<script>
document.querySelector(".hamburger").onclick = function() {
document.body.className = document.body.className === "navigating" ? "" : "navigating"
document.querySelector("h1 + ul").onclick = function() {
document.body.className = ''
}
}
</script>
</body>
</html>