can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - ZoneSpec</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="./static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" "> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> </li> <li class=" parent expanded"> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> <ul> <li class=" "> <a class="module" href="can-construct-super.html" title="can.Construct.super is a plugin that makes it easier to call base functions from inside inheriting functions."> can-construct-super </a> </li> <li class=" "> <a class="module" href="can-define-stream.html" title="Define property values using streams. can-stream is used internally to provide the stream functionality."> can-define-stream </a> </li> <li class=" "> <a class="module" href="can-fixture.html" title="can-fixture intercepts an AJAX request and simulates the response with a file or function."> can-fixture </a> </li> <li class=" "> <a class="module" href="can-fixture-socket.html" title="Simulate socket.io services."> can-fixture-socket </a> </li> <li class=" "> <a class="module" href="can-jquery.html" title="Extensions to the event system so that can events and jQuery events are cross-bound. Importing can-jquery will return the jQuery object and wire up the event system. var $ = require("can-jquery"); var div = $("<div>"); div.on("inserted", function(){ // it inserted! }); $("body").append(div);"> can-jquery </a> </li> <li class=" "> <a class="module" href="can-stache-converters.html" title="Provides a set of converters useful for two-way binding with form elements such as <input> and <select>."> can-stache-converters </a> </li> <li class=" "> <a class="module" href="can-stream.html" title="Convert observable values into streams. Kefir is used internally to provide the stream functionality."> can-stream </a> </li> <li class=" "> <a class="module" href="can-vdom.html" title="A browser-lite environment for Node.js or a worker thread."> can-vdom </a> </li> <li class=" "> <a class="module" href="can-view-import.html" title=""> can-view-import </a> </li> <li class=" parent expanded"> <a class="module" href="can-zone.html" title=""> can-zone </a> <ul> <li> <span>types</span> <ul> <li class="current parent expanded"> <a class="typedef" href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone."> ZoneSpec </a> </li> <li class=" "> <a class="typedef" href="can-zone.makeZoneSpec.html" title="A function that returns a can-zone.ZoneSpec object. This can be used any place where a can-zone.ZoneSpec is accepted."> makeZoneSpec </a> </li> </ul> </li> <li> <span>static</span> <ul> <li class=" "> <a class="property" href="can-zone.current.html" title=""> current </a> </li> <li class=" "> <a class="function" href="can-zone.error.html" title=""> error </a> </li> <li class=" "> <a class="function" href="can-zone.ignore.html" title=""> ignore </a> </li> <li class=" "> <a class="function" href="can-zone.waitFor.html" title=""> waitFor </a> </li> </ul> </li> <li> <span>prototype</span> <ul> <li class=" "> <a class="function" href="can-zone.prototype.addWait.html" title=""> addWait </a> </li> <li class=" "> <a class="property" href="can-zone.prototype.data.html" title=""> data </a> </li> <li class=" "> <a class="function" href="can-zone.prototype.removeWait.html" title=""> removeWait </a> </li> <li class=" "> <a class="function" href="can-zone.prototype.run.html" title=""> run </a> </li> </ul> </li> <li> <span>plugins</span> <ul> <li class=" "> <a class="module" href="can-zone/debug.html" title=""> ./debug </a> </li> <li class=" "> <a class="module" href="can-zone/timeout.html" title=""> ./timeout </a> </li> </ul> </li> <li> <span>modules</span> <ul> <li class=" "> <a class="module" href="can-zone/register.html" title="In order to do it's magic, can-zone has to register handlers for all of the common JavaScript async operations. If you have code (or a dependency with this code) that does: var st = setTimeout; And this module loads before can-zone, any time st is used we won't be able to track that within the Zone. To work around this, can-zone/register is used as a script that you run before any other modules. In Node require("can-zone/register"); At the top of your entry-point script. In the Browser You can either add a script tag above all others: <script src="node_modules/can-zone/register.js"></script> Or, if you're using a module loader / bundler, configure it so that can-zone/register is placed above all others in the bundle."> ./register </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="steal-stache.html" title="A StealJS extension that allows stache templates as dependencies."> steal-stache </a> </li> </ul> </li> <li class=" "> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </li> <li class=" "> <a class="page" href="can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../index.html">CanJS</a></li> / <li><a href="can-ecosystem.html">Ecosystem</a></li> / <li><a href="can-zone.html">can-zone</a></li> / <li><a href="can-zone.ZoneSpec.html">ZoneSpec</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>ZoneSpec</h1> <div>typedef</div> </div> <section class="description"> <p>A ZoneSpec is the way you tap into the lifecycle hooks of a <a href="can-zone.html" title="">Zone</a>. The hooks are described below.</p> <p>Using these hooks you can do things like create timers and override global variables that will change the <em>shape</em> of code that runs within the Zone.</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/can-zone/tree/v0.6.0/docs/ZoneSpec.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>Object</code> </h2> <div class="options"> <h3 class="options-title">Options</h3> <ul> <li> <b>created</b> <code>{function}</code>: <p>Called when the zone is first created, after all ZoneSpecs have been parsed. this is useful if you need to do setup behavior that covers the entire zone lifecycle.</p> <pre><code class="language-js">new Zone({ created: function(){ // Called as soon as `new Zone` is called } }); </code></pre> </li> <li> <b>beforeRun</b> <code>{function}</code>: <p>Called immediately before the <strong>Zone.prototype.run</strong> function is called.</p> <pre><code class="language-js">var zone = new Zone({ beforeRun: function(){ // Setup that needs to happen immediately before running // the zone function } }); zone.run(function() { ... }); </code></pre> </li> <li> <b>beforeTask</b> <code>{function}</code>: <p>Called before each Task is called. Use this to override any globals you want to exist during the execution of the task:</p> <pre><code class="language-js">new Zone({ beforeTask: function(){ window.setTimeout = mySpecialSetTimeout; } }); </code></pre> </li> <li> <b>ended</b> <code>{function}</code>: <p>Called when the Zone has ended and is about to exit (it's Promise will resolve).</p> </li> <li> <b>hooks</b> <code>{Array<string>}</code>: <p><strong>hooks</strong> allows you to specify custom hooks that your plugin calls. This is mostly to communicate between plugins that inherit each other.</p> <pre><code class="language-js">var barZone = { created: function(){ this.execHook("beforeBar"); }, hooks: ["beforeBar"] }; var fooZone = { beforeBar: function(){ // Called! }, plugins: [barZone] }; new Zone({ plugins: [fooZone] }); zone.run(function() { ... }); </code></pre> </li> <li> <b>plugins</b> <code>{Array<<a href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone.">ZoneSpec</a>|<a href="can-zone.makeZoneSpec.html" title="A function that returns a can-zone.ZoneSpec object. This can be used any place where a can-zone.ZoneSpec is accepted.">makeZoneSpec</a>(<a href="can-zone.prototype.data.html" title="">data</a>)>}</code>: <p>Allows specifying nested <a href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone.">ZoneSpecs</a> that the current depends on. This allows creating rich plugins that depend on other plugins (ZoneSpecs). You can imagine having a bunch of tiny plugins that do one thing and then composing them together into one meta-plugin that is more end-user friendly.</p> <p>Similar to the <a href="can-zone.html" title="">Zone</a> constructor you can either specify <a href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone.">ZoneSpec</a> objects or functions that return ZoneSpec objects. The former gives you a closure specific to the Zone, which is often needed for variables. These two forms are equivalent:</p> <pre><code class="language-js">var specOne = { created: function(){ } }; var specTwo = function(){ return { created: function(){ } } }; var zone = new Zone({ plugins: [ specOne, specTwo ] }); </code></pre> </li> </ul> </div> </div> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-zone/docs/ZoneSpec.md"},"description":" A ZoneSpec is the way you tap into the lifecycle hooks of a [can-zone Zone]. The hooks are described below.\n\nUsing these hooks you can do things like create timers and override global variables that will change the *shape* of code that runs within the Zone.\n\n","type":"typedef","title":"ZoneSpec","types":[{"type":"Object","options":[{"name":"created","description":"\n\nCalled when the zone is first created, after all ZoneSpecs have been parsed. this is useful if you need to do setup behavior that covers the entire zone lifecycle.\n\n```js\nnew Zone({\n\tcreated: function(){\n\t\t// Called as soon as `new Zone` is called\n\t}\n});\n```\n","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}]},{"name":"beforeRun","description":"\n\nCalled immediately before the **Zone.prototype.run** function is called.\n\n```js\nvar zone = new Zone({\n\tbeforeRun: function(){\n\t\t// Setup that needs to happen immediately before running\n\t\t// the zone function\n\t}\n});\n\nzone.run(function() { ... });\n```\n","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}]},{"name":"beforeTask","description":"\n\nCalled before each Task is called. Use this to override any globals you want to exist during the execution of the task:\n\n```js\nnew Zone({\n\tbeforeTask: function(){\n\t\twindow.setTimeout = mySpecialSetTimeout;\n\t}\n});\n```\n","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}]},{"name":"ended","description":"\n\nCalled when the Zone has ended and is about to exit (it's Promise will resolve).\n","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}]},{"name":"hooks","description":"\n\n**hooks** allows you to specify custom hooks that your plugin calls. This is mostly to communicate between plugins that inherit each other.\n\n```js\nvar barZone = {\n\tcreated: function(){\n\t\tthis.execHook(\"beforeBar\");\n\t},\n\n\thooks: [\"beforeBar\"]\n};\n\nvar fooZone = {\n\tbeforeBar: function(){\n\t\t// Called!\n\t},\n\tplugins: [barZone]\n};\n\nnew Zone({\n\tplugins: [fooZone]\n});\n\nzone.run(function() { ... });\n```\n","types":[{"type":"Array","template":[{"types":[{"type":"string"}]}]}]},{"name":"plugins","description":"\n\nAllows specifying nested [can-zone.ZoneSpec ZoneSpecs] that the current depends on. This allows creating rich plugins that depend on other plugins (ZoneSpecs). You can imagine having a bunch of tiny plugins that do one thing and then composing them together into one meta-plugin that is more end-user friendly.\n\nSimilar to the [can-zone Zone] constructor you can either specify [can-zone.ZoneSpec] objects or functions that return ZoneSpec objects. The former gives you a closure specific to the Zone, which is often needed for variables. These two forms are equivalent:\n\n```js\nvar specOne = {\n\tcreated: function(){\n\n\t}\n};\n\nvar specTwo = function(){\n\treturn {\n\t\tcreated: function(){\n\n\t\t}\n\t}\n};\n\nvar zone = new Zone({\n\tplugins: [ specOne, specTwo ]\n});\n```\n","types":[{"type":"Array","template":[{"types":[{"type":"can-zone.ZoneSpec"},{"type":"can-zone.makeZoneSpec"}]}]}]}]}],"name":"can-zone.ZoneSpec","parent":"can-zone.types","pathToRoot":".."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="./static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>