mithril
Version:
A framework for building brilliant applications
132 lines (130 loc) • 5.83 kB
HTML
<head>
<meta charset=UTF-8>
<title> redraw() - Mithril.js</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel=stylesheet>
<link href=style.css rel=stylesheet>
<link rel=icon type=image/png sizes=32x32 href=favicon.png>
<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>2.0.3</small></h1>
<nav>
<a href=index.html>Guide</a>
<a href=api.html>API</a>
<a href=https://gitter.im/MithrilJS/mithril.js>Chat</a>
<a href=https://github.com/MithrilJS/mithril.js>GitHub</a>
</nav>
</section>
</header>
<main>
<section>
<h1 id=redraw><a href=#redraw>redraw()</a></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=buildPathname.html>m.buildPathname</a></li>
<li><a href=parsePathname.html>m.parsePathname</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><ul>
<li><a href=#static-members>Static members</a>
-<a href=#mredrawsync>m.redraw.sync()</a></li>
</ul>
</li>
<li><a href=#how-it-works>How it works</a></li>
</ul>
</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/MithrilJS/mithril.js/blob/master/ospec>Ospec</a></li>
</ul>
</li>
</ul>
<hr>
<h3 id=description><a href=#description>Description</a></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>. The <a href=autoredraw.html>autoredraw</a> system, which is built on top of <code>m.redraw()</code> will take care of it.</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>
<hr>
<h3 id=signature><a href=#signature>Signature</a></h3>
<p><code>m.redraw()</code></p>
<table>
<thead>
<tr>
<th>Argument</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tr>
<td><strong>returns</strong></td>
<td></td>
<td></td>
<td>Returns nothing</td>
</tr>
</table>
<h4 id=static-members><a href=#static-members>Static members</a></h4>
<h5 id=mredrawsync><a href=#mredrawsync>m.redraw.sync</a></h5>
<p><code>m.redraw.sync()</code></p>
<table>
<thead>
<tr>
<th>Argument</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tr>
<td><strong>returns</strong></td>
<td></td>
<td></td>
<td>Returns nothing</td>
</tr>
</table>
<hr>
<h3 id=how-it-works><a href=#how-it-works>How it works</a></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><code>m.redraw()</code> always triggers an asynchronous redraws, whereas <code>m.redraw.sync()</code> triggers a synchronous one. <code>m.redraw()</code> is tied to <code>window.requestAnimationFrame()</code>. It will thus typically fire at most 60 times per second. It may fire faster if your monitor has a higher refresh rate.</p>
<p><code>m.redraw.sync()</code> is mostly intended to make videos play work in iOS. That only works in response to user-triggered events. It comes with several caveat:</p>
<ul>
<li>You should not call <code>m.redraw.sync()</code> from a <a href=lifecycle-methods.html>lifecycle method</a> or the <code>view()</code> method of a component. Doing so will result in undefined behavior (it throws an error when possible).</li>
<li><code>m.redraw.sync()</code> called from an event handler can cause the DOM to be modified while an event is bubbling. Depending on the structure of the old and new DOM trees, the event can finish the bubbling phase in the new tree and trigger unwanted handlers.</li>
<li>It is not throttled. One call to <code>m.redraw.sync()</code> causes immediately one <code>m.render()</code> call per root registered with <a href=mount.html><code>m.mount()</code></a> or <a href=route.html><code>m.route()</code></a>.</li>
</ul>
<p><code>m.redraw()</code> doesn't have any of those issues, you can call it from wherever you like.</p>
<hr>
<small>License: MIT. © Leo Horie.</small>
</section>
</main>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js defer></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-jsx.min.js defer></script>
<script src=https://unpkg.com/mithril@2.0.3/mithril.js async></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>