can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - serialize</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=" "> <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=" "> <a class="module" href="can-ejs.html" title="EJS provides live ERB-style client-side templates."> can-ejs </a> </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=" parent expanded"> <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> <ul> <li class=" "> <a class="function" href="can-map-define.TypeConstructor.html" title="Provides a constructor function to be used to convert any value passed into attr into an appropriate value"> Type </a> </li> <li class=" "> <a class="function" href="can-map-define.ValueConstructor.html" title="Provides a constructor function to be used to provide a default value for a certain property of a Map. This constructor will be invoked with new each time a new instance of the map is created."> Value </a> </li> <li class=" "> <a class="function" href="can-map-define._type.html" title="Converts a value passed to attr into an appropriate value."> type </a> </li> <li class=" "> <a class="typedef" href="can-map-define.attrDefinition.html" title="Defines the type, initial value, and get, set, and remove behavior for an attribute of a Map."> attribute definition </a> </li> <li class=" "> <a class="function" href="can-map-define.get.html" title="Specify what happens when a certain property is read on a map. get functions work like a compute and automatically update themselves when a dependent observable value is changed."> get </a> </li> <li class=" "> <a class="function" href="can-map-define.remove.html" title="Called when an attribute is removed."> remove </a> </li> <li class="current parent expanded"> <a class="function" href="can-map-define.serialize.html" title="Called when an attribute is removed."> serialize </a> </li> <li class=" "> <a class="function" href="can-map-define.set.html" title="Specify what happens when a value is set on a map attribute."> set </a> </li> <li class=" "> <a class="function" href="can-map-define.value.html" title="Returns the default value for instances of this Map. This is called before init."> value </a> </li> </ul> </li> <li class=" "> <a class="module" href="can-view-href.html" title="Sets an element's href attribute so that it'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-map-define.html">can-map-define</a></li> / <li><a href="can-map-define.serialize.html">serialize</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>serialize</h1> <div>function</div> </div> <section class="description"> <p>Called when an attribute is removed.</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-map-define/tree/v3.0.0/docs/serialize.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>serialize( currentValue )</code> </h2> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>value</b> <code>{*}</code>: <p>The current value of the attribute.</p> </li> <li><b>attr</b> <code>{String}</code>: <p>The name of the attribute being serialized.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{*|undefined}</code>: <p>If <code>undefined</code> is returned, the value is not serialized.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p><a href="can-map.prototype.serialize.html" title="Serialize this object to something that can be passed to JSON.stringify.">serialize</a> is useful for serializing a Map instance into a more JSON-friendly form. This can be used for many reasons, including saving a [can-model Model] instance on the server or serializing <a href="can-route.html" title="Manage browser history and client state by synchronizing the window.location.hash with a map.">route</a>'s internal Map for display in the hash or pushstate URL.</p> <p>The serialize property allows an opportunity to define how each attribute will behave when the map is serialized. This can be useful for:</p> <ul> <li>serializing complex types like dates, arrays, or objects into string formats</li> <li>causing certain properties to be ignored when serialize is called</li> </ul> <p>The following causes a locationIds property to be serialized into the comma separated ID values of the location property on this map:</p> <pre><code>define: { locationIds: { serialize: function(){ var ids = []; this.attr('locations').each(function(location){ ids.push(location.id); }); return ids.join(','); } } } </code></pre> <p>Returning <code>undefined</code> for any property means this property will not be part of the serialized object. For example, if the property numPages is not greater than zero, the following example won't include it in the serialized object.</p> <pre><code>define: { prop: { numPages: function( num ){ if(num <= 0) { return undefined; } return num; } } } </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-map-define/docs/serialize.md"},"description":"\nCalled when an attribute is removed.\n","title":"serialize","name":"can-map-define.serialize","type":"function","parent":"can-map-define","signatures":[{"code":"serialize( currentValue )","description":"\n","params":[{"types":[{"type":"*"}],"name":"value","description":"The current value of the attribute. \n"},{"types":[{"type":"String"}],"name":"attr","description":"The name of the attribute being serialized.\n"}],"returns":{"types":[{"type":"*"},{"type":"undefined"}],"description":"If `undefined` is returned, the value is not serialized.\n"},"context":{"types":[{"type":"Map"}],"description":"The map instance being serialized.\n"}}],"_curParam":{"types":[{"type":"String"}],"name":"attr","description":"The name of the attribute being serialized.\n"},"_curReturn":{"types":[{"type":"*"},{"type":"undefined"}],"description":"If `undefined` is returned, the value is not serialized.\n"},"comment":" ","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>