can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - can-define</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="current 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=" "> <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 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>can-define</h1> <div>module</div> </div> <section class="description"> <p>Exports the <code>define</code> method that defines observable properties and their behavior on a prototype object.</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-social"> <li> <a class="npm-button" href="https://www.npmjs.com/package/can-define"> <img src="https://img.shields.io/badge/npm%20package-1.0.4-brightgreen.svg" alt="npm package badge" /> </a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/can-define" data-count-href="/canjs/can-define/stargazers" data-count-api="/repos/canjs/can-define#stargazers_count">Star</a> </li> </ul> <ul class="title-links">  <li><a href="//github.com/canjs/can-define/tree/v1.0.4/docs/define.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>define(prototype, propDefinitions)</code> </h2> <p>Define observable properties, type conversion, and getter/setter logic on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" title="prototype objects">prototype objects</a>.</p> <pre><code class="language-js">var define = require("can-define"); var Greeting = function(message){ this.message = message; }; define(Greeting.prototype,{ message: {type: "string"} }); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>prototype</b> <code>{Object}</code>: <p>The prototype object of a constructor function or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a>. The prototype object will have getter/setters defined on it that carry out the defined behavior. The prototype will also contain all of <a href="can-event.html" title="Add event functionality into your objects. The canEvent object provides a number of methods for handling events in objects. This functionality is best used by mixing the canEvent object into an object or prototype. However, event listeners can still be used even on objects that don't include canEvent. All methods provided by canEvent assume that they are mixed into an object -- this should be the object dispatching the events.">can-event</a>'s methods.</p> </li> <li><b>propDefinitions</b> <code>{Object<String,<a 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>>}</code>: <p>An object of properties and their definitions.</p> </li> </ol> </div> </div> <section class="body"> <h2>Use</h2> <p><code>can-define</code> provides a way to create custom types with observable properties. Where <a href="can-define/map/map.html" title="Create observable objects.">can-define/map/map</a> and <a href="can-define/list/list.html" title="Create observable lists.">can-define/list/list</a> provide more functionality, they also make more assumptions on the type constructor. <code>can-define</code> can be used to create completely customized types.</p> <p>The following creates a <code>Person</code> constructor function:</p> <pre><code class="language-js">var define = require("can-define"); var Person = function(first, last){ this.first = first; this.last = last; }; define(Person.prototype,{ first: { type: "string" }, last: { type: "string" }, fullName: { get: function(){ return this.first+" "+this.last; } } }); </code></pre> <p>This can be used to create <code>Person</code> instances with observable properties:</p> <pre><code class="language-js">var person = new Person("Justin", "Meyer"); person.first //-> "Justin" person.last //-> "Meyer" person.fullName //-> "Justin Meyer" person.on("fullName", function(ev, newVal, oldVal){ newVal //-> "Ramiya Meyer" oldVal //-> "Justin Meyer" }); person.first = "Ramiya" </code></pre> <p>The observable properties call <a href="can-observation.add.html" title="Signals that an object's property is being observed, so that any functions that are recording observations will see that this object is a dependency.">Observation.add</a> so they can be observed by <a href="can-compute.html" title="Create an observable value.">can-compute</a>.</p> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-define/docs/define.md"},"description":"Exports the `define` method that defines observable properties and their behavior on a prototype object.\n\n","type":"module","title":"","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}],"name":"can-define","parent":"can-core","package":{"_args":[[{"raw":"can-define@1.0.4","scope":null,"escapedName":"can-define","name":"can-define","rawSpec":"1.0.4","spec":"1.0.4","type":"version"},"/Users/kevin/dev/canjs"]],"_from":"can-define@1.0.4","_id":"can-define@1.0.4","_inCache":true,"_location":"/can-define","_nodeVersion":"6.9.1","_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/can-define-1.0.4.tgz_1478640603718_0.932918285485357"},"_npmUser":{"name":"phillipskevin","email":"kphillips86@gmail.com"},"_npmVersion":"3.10.8","_phantomChildren":{},"_requested":{"raw":"can-define@1.0.4","scope":null,"escapedName":"can-define","name":"can-define","rawSpec":"1.0.4","spec":"1.0.4","type":"version"},"_requiredBy":["/","/can-connect","/can-define-stream","/can-define-stream/can-stream","/can-stream"],"_resolved":"https://registry.npmjs.org/can-define/-/can-define-1.0.4.tgz","_shasum":"bb43b307e6d6041739ca8ea2ae9268fa785e9d31","_shrinkwrap":null,"_spec":"can-define@1.0.4","_where":"/Users/kevin/dev/canjs","author":{"name":"Bitovi"},"bit-docs":{"dependencies":{"bit-docs-glob-finder":"^0.0.5","bit-docs-dev":"^0.0.3","bit-docs-js":"^0.0.4"},"glob":{"pattern":"**/*.{js,md}","ignore":"node_modules/**/*"},"parent":"can-define","readme":{"apis":"./docs/apis.json"}},"bugs":{"url":"https://github.com/canjs/can-define/issues"},"dependencies":{"can-compute":"^3.0.0","can-construct":"^3.0.0","can-event":"^3.0.1","can-observation":"^3.0.1","can-util":"^3.0.1"},"description":"Create observable objects with JS dot operator compatibility","devDependencies":{"bit-docs":"^0.0.5","can-list":"^3.0.0-pre.8","can-stache":"^3.0.0-pre.20","jshint":"^2.9.1","serve":"^1.4.0","steal":"^0.16.0","steal-qunit":"^0.1.1","steal-tools":"^0.16.0","testee":"^0.2.5"},"directories":{},"dist":{"shasum":"bb43b307e6d6041739ca8ea2ae9268fa785e9d31","tarball":"https://registry.npmjs.org/can-define/-/can-define-1.0.4.tgz"},"gitHead":"75b712a6a27d92d44a2900463cfc7e6c10713a3e","homepage":"https://github.com/canjs/can-define","keywords":["CanJS"],"license":"MIT","main":"can-define.js","maintainers":[{"name":"akagomez","email":"akagomez@gmail.com"},{"name":"daffl","email":"daff@neyeon.de"},{"name":"garrettreed","email":"garrett@garrettreed.co"},{"name":"justinbmeyer","email":"justin@bitovi.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"},{"name":"phillipskevin","email":"kphillips86@gmail.com"}],"name":"can-define","optionalDependencies":{},"readme":"ERROR: No README data found!","repository":{"type":"git","url":"git+https://github.com/canjs/can-define.git"},"scripts":{"build":"node build.js","jshint":"jshint --config .jshintrc --exclude ./node_modules .","postversion":"git push --tags && git checkout master && git branch -D release && git push","preversion":"npm test && npm run build","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","release:pre":"npm version prerelease && npm publish","start":"serve -p 8080","test":"npm run jshint && npm run testee","testee":"testee test/test.html --browsers firefox","version":"git commit -am \"Update dist for release\" && git checkout -b release && git add -f dist/"},"system":{"npmAlgorithm":"flat"},"version":"1.0.4"},"signatures":[{"code":"define(prototype, propDefinitions)","description":"\n\nDefine observable properties, type conversion, and getter/setter logic on [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain prototype objects].\n\n```js\nvar define = require(\"can-define\");\n\nvar Greeting = function(message){\n this.message = message;\n};\n\ndefine(Greeting.prototype,{\n message: {type: \"string\"}\n});\n```\n","params":[{"types":[{"type":"Object","options":[]}],"name":"prototype","description":"The prototype object of a constructor function or [class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class). The prototype\nobject will have getter/setters defined on it that carry out the defined behavior. The prototype will also contain\nall of [can-event]'s methods.\n"},{"types":[{"type":"Object","template":[{"types":[{"type":"String"}]},{"types":[{"type":"can-define.types.propDefinition"}]}]}],"name":"propDefinitions","description":"An object of\nproperties and their definitions.\n\n"}]}],"_curParam":{"types":[{"type":"Object","template":[{"types":[{"type":"String"}]},{"types":[{"type":"can-define.types.propDefinition"}]}]}],"name":"propDefinitions","description":"An object of\nproperties and their definitions.\n\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>