@zkochan/pnpm
Version:
A fast implementation of npm install
82 lines (81 loc) • 4.37 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/style.css?t=b42a3c4d">
<script src="assets/script.js?t=2bcc4b59"></script>
<title>Automatic observation</title>
<meta name="viewport" content="width=device-width">
</head>
<body class="-menu-visible">
<div class="doc-layout">
<div class="toggle menu-toggle js-menu-toggle"></div>
<div class="body page-automatic-observation">
<div class="header-nav">
<div class="right"><a href="https://github.com/rstacruz/onmount" data-title="rstacruz/onmount" class="iconlink">
<!-- span.title Open in GitHub--><span class="icon -github"></span></a>
</div>
</div>
<div class="markdown-body"><h1 id="automatic-observation">Automatic observation</h1>
<p>You can turn on automatic observation via the <a href="https://developer.mozilla.org/en/docs/Web/API/MutationObserver">MutationObserver</a> API. Not supported in Opera and IE10 and below. (<em>experimental</em>)</p>
<pre><code class="lang-js">onmount.observe()
</code></pre>
<p>Considering not all browsers support this, you can set up fallbacks via:</p>
<pre><code class="lang-js"><span class="pl-k">if</span> (!$.onmount.observe()) {
$(<span class="pl-c1">document</span>)
.ready($.onmount)
.on(<span class="pl-s">'show.bs hide.bs load'</span>, $.onmount)
}
</code></pre>
<p>While this is convenient, it is not recommended as it can accrue some performance penalty by checking every DOM insertion that happens in realtime. Consider this an experimental feature and subject to future optimizations.</p>
</div>
<div class="footer-nav">
<div class="left"><a href="idempotency.html"><span class="title">Idempotency</span></a></div>
<div class="right"><a href="testing.html"><span class="label">Next: </span><span class="title">Testing</span></a></div>
</div>
</div>
<div class="menu toc-menu">
<li class="menu-item -level-0 -parent">
<ul class="submenu">
<li class="menu-item -level-1"><a href="index.html" class="link title link-index">onmount</a>
</li>
<li class="menu-item -level-1"><a href="premise.html" class="link title link-premise">Premise</a>
</li>
<li class="menu-item -level-1 -parent"><span class="title">Features</span>
<ul class="submenu">
<li class="menu-item -level-2"><a href="role.html" class="link title link-role">Role attributes</a>
</li>
<li class="menu-item -level-2"><a href="cancelling.html" class="link title link-cancelling">Cancelling</a>
</li>
<li class="menu-item -level-2"><a href="cleanup.html" class="link title link-cleanup">Preforming cleanups</a>
</li>
<li class="menu-item -level-2"><a href="unique-ids.html" class="link title link-unique-ids">Unique IDs</a>
</li>
<li class="menu-item -level-2"><a href="idempotency.html" class="link title link-idempotency">Idempotency</a>
</li>
<li class="menu-item -level-2"><a href="automatic-observation.html" class="link title -active link-automatic-observation">Automatic observation</a>
</li>
</ul>
</li>
<li class="menu-item -level-1 -parent"><span class="title">Testing</span>
<ul class="submenu">
<li class="menu-item -level-2"><a href="testing.html" class="link title link-testing">Testing</a>
</li>
<li class="menu-item -level-2"><a href="debugging.html" class="link title link-debugging">Debugging</a>
</li>
</ul>
</li>
<li class="menu-item -level-1 -parent"><span class="title">Integrations</span>
<ul class="submenu">
<li class="menu-item -level-2"><a href="turbolinks.html" class="link title link-turbolinks">With Turbolinks</a>
</li>
<li class="menu-item -level-2"><a href="rails.html" class="link title link-rails">With Rails</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</div>
</body>
</html>