UNPKG

can

Version:

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

555 lines (354 loc) 13.8 kB
<!DOCTYPE html> <!--#################################################################### THIS IS A GENERATED FILE -- ANY CHANGES MADE WILL BE OVERWRITTEN INSTEAD CHANGE: source: [object Object] @function can-ejs/tags.scriptlet ######################################################################## --> <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - &lt;% CODE %&gt;</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> &nbsp; </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=" "> <a class="page" href="../can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> </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=" parent expanded"> <a class="page" href="../can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> <ul> <li class=" parent expanded"> <a class="module" href="../can-ejs.html" title="EJS provides live ERB-style client-side templates."> can-ejs </a> <ul> <li> <span>tags</span> <ul> <li class="current parent expanded"> <a class="function" href="tags.scriptlet.html" title=""> &lt;% CODE %&gt; </a> </li> <li class=" "> <a class="function" href="tags.escaped.html" title=""> &lt;%= CODE %&gt; </a> </li> <li class=" "> <a class="function" href="tags.unescaped.html" title=""> &lt;%== CODE %&gt; </a> </li> <li class=" "> <a class="function" href="tags.comment.html" title=""> &lt;%# CODE %&gt; </a> </li> </ul> </li> <li> <span>methods</span> <ul> <li class=" "> <a class="function" href="methods.from.html" title="Return a template loaded from an element."> from </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="../can-list.html" title=""> can-list </a> </li> <li class=" "> <a class="module" href="../can-map.html" title="Create observable objects."> can-map </a> </li> <li class=" "> <a class="module" href="../can-map-backup.html" title=""> can-map-backup </a> </li> <li class=" "> <a class="module" href="../can-map-define.html" title="Defines the type, initial value, get, set, remove, and serialize behavior for attributes of a Map."> can-map-define </a> </li> <li class=" "> <a class="module" href="../can-view-href.html" title="Sets an element&#x27;s href attribute so that it&#x27;s url will set the specified attribute values on can-route."> can-view-href </a> </li> </ul> </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-legacy.html">Legacy</a></li> / <li><a href="../can-ejs.html">can-ejs</a></li> / <li><a href="tags.scriptlet.html">&lt;% CODE %&gt;</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>&lt;% CODE %&gt;</h1> <div>function</div> </div> <section class="description"> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links"> <!-- <li><a href="#">docco</a></li> --> <li><a href="//github.com/canjs/can-ejs/tree/v3.0.0/doc/tags.scriptlet.md">source</a></li> <!-- <li><a href="#">download</a></li> --> <!-- <li><a href="#">tests</a></li> --> </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>&lt;% CODE %&gt;</code> </h2> <p>Runs JavaScript Code.</p> <p>This type of magic tag does not modify the template but is used for JS control statements like for-loops, if/else, switch, etc. An example:</p> <pre><code>&lt;% if( items.attr('length') === 0 ) { %&gt; &lt;tr&gt;&lt;td&gt;You have no items&lt;/td&gt;&lt;/tr&gt; &lt;% } else { %&gt; &lt;% items.each(function(item){ %&gt; &lt;tr&gt; .... &lt;/tr&gt; &lt;% }) %&gt; &lt;% } %&gt; </code></pre> <p>Variable declarations and control blocks should always be defined in their own dedicated tags. Live binding leverages this hinting to ensure that logic is declared and executed at its intended scope.</p> <pre><code>&lt;!-- Each statement has its own dedicated EJS tag --&gt; &lt;% var address = person.attr('address') %&gt; &lt;% items.each(function(item){ %&gt; &lt;tr&gt; .... &lt;/tr&gt; &lt;% }) %&gt; &lt;span&gt;&lt;%= address.attr('street') %&gt;&lt;span&gt; &lt;!-- This won't work! --&gt; &lt;% var address = person.attr('address'); items.each(function(item) { %&gt; &lt;tr&gt; .... &lt;/tr&gt; &lt;% }) %&gt; &lt;span&gt;&lt;%= address.attr('street') %&gt;&lt;span&gt; </code></pre> </div> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-ejs/doc/tags.scriptlet.md"},"description":"\n","title":"<% CODE %>","name":"can-ejs/tags.scriptlet","type":"function","parent":"can-ejs/tags","order":0,"signatures":[{"code":"<% CODE %>","description":"\n\nRuns JavaScript Code.\n\nThis type of magic tag does not modify the template but is used for JS control statements\nlike for-loops, if/else, switch, etc. An example:\n\n <% if( items.attr('length') === 0 ) { %>\n <tr><td>You have no items</td></tr>\n <% } else { %>\n <% items.each(function(item){ %>\n <tr> .... </tr>\n <% }) %>\n <% } %>\n\nVariable declarations and control blocks should always be defined in\ntheir own dedicated tags. Live binding leverages this hinting to ensure that logic is declared and executed at its intended scope.\n\n\t<!-- Each statement has its own dedicated EJS tag -->\n <% var address = person.attr('address') %>\n <% items.each(function(item){ %>\n <tr> .... </tr>\n <% }) %>\n <span><%= address.attr('street') %><span>\n\n <!-- This won't work! -->\n <%\n var address = person.attr('address');\n items.each(function(item) {\n %>\n <tr> .... </tr>\n <% }) %>\n <span><%= address.attr('street') %><span>\n","params":[]}],"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>