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=" parent expanded"> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> <ul> <li class=" "> <a class="module" href="can-component.html" title="Create a custom element that can be used to manage widgets or application logic."> can-component </a> </li> <li class=" "> <a class="module" href="can-compute.html" title="Create an observable value."> can-compute </a> </li> <li class=" "> <a class="module" href="can-connect.html" title="can-connect provides persisted data middleware. Use it to assemble powerful model layers for any JavaScript project."> can-connect </a> </li> <li class=" parent expanded"> <a class="module" href="can-define.html" title="Exports the define method that defines observable properties and their behavior on a prototype object."> can-define </a> <ul> <li> <span>static</span> <ul> <li class=" "> <a class="property" href="can-define.types.html" title="Defines the type, initial value, and get, set, and serialize behavior for an observable property. All type converters leave null and undefined as is except for the "htmlbool" type converter."> types </a> </li> </ul> </li> <li> <span>types</span> <ul> <li class=" "> <a class="typedef" href="can-define.types.propDefinition.html" title="Defines the type, initial value, and get, set, and serialize behavior for an observable property. These behaviors can be specified with as an Object, String, Constructor function, Array, a getter expression, or setter expression."> PropDefinition </a> </li> </ul> </li> <li> <span>behaviors</span> <ul> <li class=" "> <a class="typedef" href="can-define.types.TypeConstructor.html" title="Provides a constructor function to be used to convert any set value into an appropriate value."> Type </a> </li> <li class=" "> <a class="function" href="can-define.types.ValueConstructor.html" title="Provides a constructor function to be used to provide a default value for a property."> Value </a> </li> <li class=" "> <a class="function" href="can-define.types.get.html" title="Specify what happens when a certain property is read on a map. get functions work like a can-compute and automatically update themselves when a dependent observable value is changed."> get </a> </li> <li class="current parent expanded"> <a class="function" href="can-define.types.serialize.html" title="Defines custom serialization behavior for a property."> serialize </a> </li> <li class=" "> <a class="function" href="can-define.types.set.html" title="Specify what happens when a property value is set."> set </a> </li> <li class=" "> <a class="typedef" href="can-define.types.type.html" title="Converts a value set on an instance into an appropriate value."> type </a> </li> <li class=" "> <a class="function" href="can-define.types.value.html" title="Returns the default value for instances of the defined type. The default value is defined on demand, when the property is read for the first time."> value </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="can-define/list/list.html" title="Create observable lists."> can-define/list/list </a> </li> <li class=" "> <a class="module" href="can-define/map/map.html" title="Create observable objects."> can-define/map/map </a> </li> <li class=" "> <a class="function" href="can-route.html" title="Manage browser history and client state by synchronizing the window.location.hash with a map."> can-route </a> </li> <li class=" "> <a class="module" href="can-route-pushstate.html" title="Changes can-route to use pushstate to change the window's pathname instead of the hash. var route = require("can-route-pushstate"); route("{page}", { page: "home" }); route.ready(); route.attr("page", "user"); location.pathname; // -> "/user""> can-route-pushstate </a> </li> <li class=" "> <a class="module" href="can-set.html" title="can-set is a utility for comparing sets that are represented by the parameters commonly passed to service requests."> can-set </a> </li> <li class=" "> <a class="module" href="can-stache.html" title="Live binding Mustache and Handlebars-compatible templates."> can-stache </a> </li> <li class=" "> <a class="module" href="can-stache/helpers/route.html" title="Adds stache helpers that use can-route."> can-stache/helpers/route </a> </li> <li class=" "> <a class="module" href="can-stache-bindings.html" title="Provides template event, one-way, and two-way bindings."> can-stache-bindings </a> </li> </ul> </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=" "> <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-core.html">Core</a></li> / <li><a href="can-define.html">can-define</a></li> / <li><a href="can-define.types.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>Defines custom serialization behavior for a property.</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-define/tree/v1.0.4/docs/serialize.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>Boolean</code> </h2> <p>Specifies if the property should be serialized. By default, all properties except for ones with defined <a href="can-define.types.get.html" title="Specify what happens when a certain property is read on a map. get functions work like a can-compute and automatically update themselves when a dependent observable value is changed.">getters</a> are serialized. Prevent a property from being serialized like:</p> <pre><code class="language-js">propertyName: { serialize: false } </code></pre> <p>Make a <a href="can-define.types.get.html" title="Specify what happens when a certain property is read on a map. get functions work like a can-compute and automatically update themselves when a dependent observable value is changed.">getter</a> property part of the serialized result like:</p> <pre><code class="language-js">propertyName: { get: function(){ ... }, serialize: true } </code></pre> </div> <div class="signature"> <h2 class="signature-title"> <code>serialize( currentValue, propertyName )</code> </h2> <p>Specifies the serialized value of a property.</p> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>currentValue</b> <code>{*}</code>: <p>The current value of the attribute.</p> </li> <li><b>propertyName</b> <code>{String}</code>: <p>The name of the property 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-define/map/map.prototype.serialize.html" title="Get a serialized representation of the map instance and its children.">serialize</a> is useful for serializing an instance into a more JSON-friendly form. This can be used for many reasons, including saving a <a href="can-connect.html" title="can-connect provides persisted data middleware. Use it to assemble powerful model layers for any JavaScript project.">can-connect</a>ed instance on the server or serializing [can-route.map can-route.map]'s internal map for display in the hash or pushstate URL.</p> <p>The serialize property allows an opportunity to define how each property will behave when the instance 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 instance:</p> <pre><code class="language-js">locationIds: { serialize: function(){ return this.locations.map(function(location){ ids.push(location.id); }).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 class="language-js">prop: { numPages: { serialize: function( num ){ if(num <= 0) { return undefined; } return num; } } } </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-define/docs/serialize.md"},"description":"\nDefines custom serialization behavior for a property.\n","title":"serialize","name":"can-define.types.serialize","type":"function","parent":"can-define.behaviors","signatures":[{"code":"Boolean","description":"\n\nSpecifies if the property should be serialized. By default, all properties except for\nones with defined [can-define.types.get getters] are serialized. Prevent a property\nfrom being serialized like:\n\n```js\npropertyName: {\n serialize: false\n}\n```\n\nMake a [can-define.types.get getter] property part of the serialized result like:\n\n```js\npropertyName: {\n get: function(){ ... },\n serialize: true\n}\n```\n","params":[]},{"code":"serialize( currentValue, propertyName )","description":"\n\nSpecifies the serialized value of a property.\n","params":[{"types":[{"type":"*"}],"name":"currentValue","description":"The current value of the attribute.\n"},{"types":[{"type":"String"}],"name":"propertyName","description":"The name of the property being serialized.\n"}],"returns":{"types":[{"type":"*"},{"type":"undefined"}],"description":"If `undefined` is returned, the value is not serialized.\n"}}],"_curParam":{"types":[{"type":"String"}],"name":"propertyName","description":"The name of the property 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>