@zkochan/pnpm
Version:
A fast implementation of npm install
84 lines (82 loc) • 5.07 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>Preforming cleanups</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-cleanup">
<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="performing-cleanups">Performing cleanups</h1>
<p>When your behavior modifies things outside itself (eg, binds events to the <code>document</code> element), you might want to clean up when the behavior is removed. Just pass a 2nd function to <code>onmount()</code>.</p>
<p>In this example below, behaviors are checked once dialog boxes are opened and closed (<code>$.onmount()</code>). When it's called after closing, it will see that the old <code>.js-sticky</code> element is not part of the document anymore, and its exit callback will be called.</p>
<pre><code class="lang-js">$.onmount(<span class="pl-s">'.js-sticky'</span>, <span class="hljs-function"><span class="pl-k">function</span> (<span class="hljs-params"></span>) </span>{
$(<span class="pl-c1">document</span>).on(<span class="pl-s">'scroll.sticky'</span>, <span class="hljs-function"><span class="pl-k">function</span> (<span class="hljs-params"></span>) </span>{
<span class="pl-c">// do stuff</span>
})
}, <span class="hljs-function"><span class="pl-k">function</span> (<span class="hljs-params"></span>) </span>{
$(<span class="pl-c1">document</span>).off(<span class="pl-s">'scroll.sticky'</span>)
})
$(<span class="hljs-function"><span class="pl-k">function</span> (<span class="hljs-params"></span>) </span>{ $.onmount() })
$(<span class="pl-c1">document</span>).on(<span class="pl-s">'show.bs.modal close.bs.modal'</span>, <span class="hljs-function"><span class="pl-k">function</span> (<span class="hljs-params"></span>) </span>{ $.onmount() })
</code></pre>
</div>
<div class="footer-nav">
<div class="left"><a href="cancelling.html"><span class="title">Cancelling</span></a></div>
<div class="right"><a href="unique-ids.html"><span class="label">Next: </span><span class="title">Unique IDs</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 -active 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 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>