can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - can-compute</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="current parent expanded"> <a class="module" href="can-compute.html" title="Create an observable value."> can-compute </a> <ul> <li class=" "> <a class="typedef" href="can-compute.computeSettings.html" title=""> computeSettings </a> </li> <li class=" "> <a class="function" href="can-compute.computed.html" title="A derived value from other computes and observable maps."> compute </a> </li> </ul> </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=" "> <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> </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-compute.html">can-compute</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-compute</h1> <div>module</div> </div> <section class="description"> <p>Create an observable value.</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-compute"> <img src="https://img.shields.io/badge/npm%20package-3.0.3-brightgreen.svg" alt="npm package badge" /> </a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/can-compute" data-count-href="/canjs/can-compute/stargazers" data-count-api="/repos/canjs/can-compute#stargazers_count">Star</a> </li> </ul> <ul class="title-links">  <li><a href="//github.com/canjs/can-compute/tree/v3.0.3/docs/compute.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>compute(getterSetter[, context])</code> </h2> <p>Create a compute that derives its value from other observables. Uses <a href="can-observation.html" title="Provides a mechanism to notify when an observable has been read and a way to observe those reads called within a given function.">can-observation</a> to call the <code>getterSetter</code> and track observables.</p> <pre><code class="language-js">var age = compute(32); var nameAndAge = compute(function(){ return "Matthew - " + age(); }); console.log(nameAndAge()); // -> Matthew - 32 age(33); console.log(nameAndAge()); // -> Matthew - 33 </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>getterSetter</b> <code>{function(newVal, oldVal)}</code>: <p>A function that gets, and optionally sets, the value of the compute. When called with no arguments, <em>getterSetter</em> should return the current value of the compute. When called with a single argument, <em>getterSetter</em> should arrange things so that the next read of the compute produces that value. This compute will automatically update its value when any observables values are read.</p> </li> <li><b>context</b> <code>{Object}</code>: <p>The <code>this</code> to use when calling the <code>getterSetter</code> function.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a>(newVal)}</code>: <p>A new compute.</p> </p> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>compute(initialValue [, settings])</code> </h2> <p>Creates a compute from a value and optionally specifies how to read, update, and listen to changes in dependent values. This form of compute can be used to create a compute that derives its value from any source.</p> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>initialValue</b> <code>{*}</code>: <p>The initial value of the compute. If <code>settings</code> is not provided, the compute simply updates its value to whatever the first argument to the compute is.</p> <pre><code>var age = compute(30); age() //-> 30 age(31) //-> fires a "change" event </code></pre> </li> <li><b>settings</b> <code>{<a href="can-compute.computeSettings.html" title="">computeSettings</a>}</code>: <p>Configures all behaviors of the <a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a>. The following cross binds an input element to a compute:</p> <pre><code class="language-js">var input = document.getElementById("age") var value = compute("",{ get: function(){ return input.value; }, set: function(newVal){ input.value = newVal; }, on: function(updated){ input.addEventListener("change", updated, false); }, off: function(updated){ input.removeEventListener("change", updated, false); } }) </code></pre> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a>(newVal)}</code>: <p>The new compute.</p> </p> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>compute(initialValue, setter(newVal,oldVal))</code> </h2> <p>Create a compute that has a setter that can adjust incoming new values.</p> <pre><code class="language-js">var age = compute(6,function(newVal, oldVal){ if(!isNaN(+newVal)){ return +newVal; } else { return oldVal; } }); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>initialValue</b> <code>{*}</code>: <p>The initial value of the compute.</p> </li> <li><b>setter</b> <code>{function(newVal, oldVal)}</code>: <p>A function that is called when a compute is called with an argument. The function is passed the first argumented passed to <a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a> and the current value. If <code>set</code> returns a value, it is used to compare to the current value of the compute. Otherwise, <code>get</code> is called to get the current value of the compute and that value is used to determine if the compute has changed values.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a>(newVal)}</code>: <p>A new compute.</p> </p> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>compute(object, propertyName [, eventName])</code> </h2> <p>Create a compute from an object's property value. This short-cut signature lets you create a compute on objects that have events that can be listened to with <a href="can-compute.computed.on.html" title="Listen to when a compute changes value.">on</a>.</p> <pre><code class="language-js">var input = document.getElementById('age') var age = compute(input,"value","change"); var me = new DefineMap({name: "Justin"}); var name = compute(me,"name"); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>object</b> <code>{Object}</code>: <p>An object that has an <code>addEventListener</code> method and events dispatched on it.</p> </li> <li><b>propertyName</b> <code>{String}</code>: <p>The property value to read on <code>object</code>. The property will be read via <code>object.attr(propertyName)</code> or <code>object[propertyName]</code>.</p> </li> <li><b>eventName</b> <code>{String}</code>: <p>Specifies the event name to listen to on <code>object</code> for <code>propertyName</code> updates.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a>(newVal)}</code>: <p>A new compute.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p><code>can-compute</code> exports a function that lets you make an observable value. The following makes an observable <code>age</code> compute whose value changes from <code>33</code> to <code>34</code>:</p> <pre><code class="language-js">var compute = require("can-compute"); var age = compute(33); age(); // 33 age.on("change",function(ev, newVal, oldVal){ newVal //-> 34 oldVal //-> 33 }) age(34); age(); // 33 </code></pre> <p>Computes are similar to observable maps like <a href="can-define/map/map.html" title="Create observable objects.">can-define/map/map</a>, but they represent a single value rather than a collection of values.</p> <p>Computes can derive their value from other computes, maps and lists. When the derived values change, the compute's value will be automatically updated. This is <code>can-compute</code>'s best feature. For example, the following combines the age compute in the previous example, and a <code>name</code> compute into an <code>info</code> compute:</p> <pre><code class="language-js">var age = compute(33), name = compute("Justin"), info = compute(function(){ return name() +" is "+age()+"." }); info() //-> "Justin is 33." </code></pre> <p>If we listen to <a href="can-compute.computed.ChangeEvent.html" title="Event fired when the value of the can-compute.computed changes.">change</a> on <code>info</code>, if either <code>age</code> or <code>name</code> changes, <code>info</code> will be updated automatically:</p> <pre><code class="language-js">info.on("change", function(ev, newVal, oldVal){ newVal //-> "Justin is 34." }); age(34) </code></pre> <p>Computes are similar to event streams like <code>Bacon.js</code> or <code>RXJS</code>. However, computes are easier to compose values because:</p> <ul> <li>you can just read other observables and computes and return a value.</li> <li>you don't have to manage subscribing and merging streams yourself.</li> </ul> <p>Also, computes can also have <a href="can-event/batch/batch.html" title="Adds task batching abilities to event dispatching.">batched updates</a> to prevent unnecessary updates. For example, if both <code>age</code> and <code>name</code> were changed at the same time, we could prevent <code>info</code> from updating twice with:</p> <pre><code class="language-js">var canBatch = require("can-event/batch/batch"); canBatch.start(); age(35) name("Justin Meyer") canBatch.stop(); </code></pre> <p>There are a wide variety of ways to create computes. Read on to understand the basics.</p> <h2>Observing a value</h2> <p>The simplest way to use a compute is to have it store a single value, and to set it when that value needs to change:</p> <pre><code>var tally = compute(12); tally(); // 12 tally.on("change",function(ev, newVal, oldVal){ console.log(newVal,oldVal) }) tally(13); tally(); // 13 </code></pre> <p>Any value can be observed. The following creates a compute that holds an object and then changes it to an array.</p> <pre><code class="language-js">var data = compute({name: "Justin"}) data([{description: "Learn Computes"}]) </code></pre> <h2>Derived computes</h2> <p>If you use a compute that derives its value from properties of an observable map or other <a href="can-compute.html" title="Create an observable value.">can-compute</a>s, the compute will listen for changes in those properties and automatically recalculate itself, emitting a <em>change</em> event if its value changes.</p> <p>The following example shows creating a <code>fullName</code> compute that derives its value from two properties on the <code>person</code> observe:</p> <pre><code class="language-js">var person = new Person({ firstName: 'Alice', lastName: 'Liddell' }); var fullName = compute(function() { return person.firstName + ' ' + person.lastName; }); fullName.on('change', function(ev, newVal, oldVal) { console.log("This person's full name is now " + newVal + '.'); }); person.firstName = 'Allison'; // The log reads: //-> "This person's full name is now Allison Liddell." </code></pre> <p>Because Person is an observable <a href="can-define/map/map.html" title="Create observable objects.">can-define/map/map</a> can-compute knows to listen for changes because the map's firstName and lastName properties are read.</p> <h2>Translator computes - computes that update their derived values</h2> <p>Sometimes you need a compute to be able to translate one value to another. For example, consider a widget that displays and allows you to update the progress in percent of a task. It accepts a compute with values between 0 and 100. But, our task observe has progress values between 0 and 1 like:</p> <pre><code class="language-js">var task = new DefineMap({ progress: 0.75 }); </code></pre> <p>Use <code>compute( getterSetter )</code> to create a compute that updates itself when task's <code>progress</code> changes, but can also update progress when the compute function is called with a value. For example:</p> <pre><code class="language-js">var progressPercent = compute(function(percent){ if(arguments.length){ task.progress = percent / 100; } else { return task.progress * 100; } }) progressPercent() // -> 75 progressPercent(100) task.progress; // -> 1 </code></pre> <p>The following is a similar example that shows converting feet into meters and back:</p> <pre><code class="language-js">var wall = new DefineMap({ material: 'brick', length: 10 // in feet }); var wallLengthInMeters = compute(function(lengthInM) { if(arguments.length) { wall.length = lengthInM / 3.28084; } else { return wall.length * 3.28084; } }); wallLengthInMeters(); // 3.048 // When you set the compute... wallLengthInMeters(5); wallLengthInMeters(); // 5 // ...the original map changes too. wall.length; // 16.4042 </code></pre> <h2>Events</h2> <p>When a compute's value is changed, it emits a <a href="can-compute.computed.ChangeEvent.html" title="Event fired when the value of the can-compute.computed changes.">change</a> event. You can listen for this change event by using <code>on</code> to bind an event handler to the compute:</p> <pre><code class="language-js">var tally = compute(0); tally.on('change', function(ev, newVal, oldVal) { console.log('The tally is now at ' + newVal + '.'); }); tally(tally() + 5); // The log reads: // 'The tally is now at 5.' </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-compute/docs/compute.md"},"description":"Create an observable value. \n","name":"can-compute","type":"module","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}],"parent":"can-core","release":"1.1","link":"../docco/compute/compute.html docco","package":{"_args":[[{"raw":"can-compute@3.0.3","scope":null,"escapedName":"can-compute","name":"can-compute","rawSpec":"3.0.3","spec":"3.0.3","type":"version"},"/Users/kevin/dev/canjs"]],"_from":"can-compute@3.0.3","_id":"can-compute@3.0.3","_inCache":true,"_location":"/can-compute","_nodeVersion":"6.9.1","_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/can-compute-3.0.3.tgz_1478638622115_0.14861495466902852"},"_npmUser":{"name":"phillipskevin","email":"kphillips86@gmail.com"},"_npmVersion":"3.10.8","_phantomChildren":{},"_requested":{"raw":"can-compute@3.0.3","scope":null,"escapedName":"can-compute","name":"can-compute","rawSpec":"3.0.3","spec":"3.0.3","type":"version"},"_requiredBy":["/","/can-component","/can-connect","/can-control","/can-define","/can-define-stream","/can-define-stream/can-stream","/can-ejs","/can-legacy-view-helpers","/can-map","/can-map-backup","/can-map-define","/can-route","/can-stache","/can-stache-bindings","/can-stream","/can-view-href","/can-view-live","/can-view-scope"],"_resolved":"file:../can-compute","_shasum":"f099227a925503499cadbef3054b961787ab023a","_shrinkwrap":null,"_spec":"can-compute@3.0.3","_where":"/Users/kevin/dev/canjs","author":{"name":"Bitovi","email":"contact@bitovi.com","url":"http://bitovi.com"},"bit-docs":{"dependencies":{"bit-docs-glob-finder":"^0.0.5","bit-docs-dev":"^0.0.3","bit-docs-js":"^0.0.3","bit-docs-generate-readme":"^0.0.8"},"glob":{"pattern":"**/*.{js,md}","ignore":"node_modules/**/*"},"readme":{"apis":"./docs/apis.json"},"parent":"can-compute"},"bugs":{"url":"https://github.com/canjs/can-compute/issues"},"dependencies":{"can-event":"^3.0.1","can-observation":"^3.0.1","can-util":"^3.0.1"},"description":"compose observables","devDependencies":{"bit-docs":"0.0.6","can-define":"^1.0.1","done-serve":"^0.2.5","donejs-cli":"^0.9.5","generator-donejs":"^0.9.0","jshint":"^2.9.1","steal":"^0.16.35","steal-qunit":"^0.1.1","steal-tools":"^0.16.0","testee":"^0.2.4"},"directories":{},"dist":{"shasum":"f099227a925503499cadbef3054b961787ab023a","tarball":"https://registry.npmjs.org/can-compute/-/can-compute-3.0.3.tgz"},"gitHead":"e700bd4d675592d307aebf51935968ce5783c5e2","homepage":"http://canjs.com","keywords":["canjs","canjs-plugin","donejs"],"main":"can-compute","maintainers":[{"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-compute","optionalDependencies":{},"readme":"ERROR: No README data found!","repository":{"type":"git","url":"git://github.com/canjs/can-compute.git"},"scripts":{"build":"node build.js","develop":"done-serve --static --develop --port 8080","document":"bit-docs","jshint":"jshint *.js --config","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","test":"npm run jshint && npm run testee","testee":"testee test.html --browsers firefox","version":"git commit -am \"Update dist for release\" && git checkout -b release && git add -f dist/"},"system":{"npmAlgorithm":"flat"},"version":"3.0.3"},"signatures":[{"code":"compute(getterSetter[, context])","description":"\n\nCreate a compute that derives its value from other observables. Uses [can-observation] to call the `getterSetter` and track observables.\n\n```js\nvar age = compute(32);\n\nvar nameAndAge = compute(function(){\n\treturn \"Matthew - \" + age();\n});\n\nconsole.log(nameAndAge()); // -> Matthew - 32\n\nage(33);\n\nconsole.log(nameAndAge()); // -> Matthew - 33\n```\n","params":[{"types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[{"types":[{"type":"*+"}],"name":"newVal"},{"types":[{"type":"*+"}],"name":"oldVal"}]}],"name":"getterSetter","description":"A function that gets, and optionally sets, the value of the compute. When called with no arguments, _getterSetter_ should return the current value of the compute. When called with a single argument, _getterSetter_ should arrange things so that the next read of the compute produces that value. This compute will automatically update its value when any observables values are read.\n"},{"types":[{"type":"Object","options":[]}],"optional":true,"name":"context","description":"The `this` to use when calling the `getterSetter` function.\n"}],"returns":{"types":[{"type":"can-compute.computed"}],"description":"A new compute.\n\n"}},{"code":"compute(initialValue [, settings])","description":"\n\nCreates a compute from a value and optionally specifies how to read, update, and\nlisten to changes in dependent values. This form of compute can be used to\ncreate a compute that derives its value from any source.\n","params":[{"types":[{"type":"*"}],"name":"initialValue","description":"The initial value of the compute. If `settings` is\nnot provided, the compute simply updates its value to whatever the first argument\nto the compute is.\n\n var age = compute(30);\n age() //-> 30\n age(31) //-> fires a \"change\" event\n"},{"types":[{"type":"can-compute.computeSettings"}],"optional":true,"name":"settings","description":"\n\nConfigures all behaviors of the [can-compute.computed]. The following cross\nbinds an input element to a compute:\n\n```js\nvar input = document.getElementById(\"age\")\nvar value = compute(\"\",{\n\tget: function(){\n\t\treturn input.value;\n\t},\n\tset: function(newVal){\n\t\tinput.value = newVal;\n\t},\n\ton: function(updated){\n\t\tinput.addEventListener(\"change\", updated, false);\n\t},\n\toff: function(updated){\n\t\tinput.removeEventListener(\"change\", updated, false);\n\t}\n})\n```\n"}],"returns":{"types":[{"type":"can-compute.computed"}],"description":"The new compute.\n\n"}},{"code":"compute(initialValue, setter(newVal,oldVal))","description":"\n\nCreate a compute that has a setter that can adjust incoming new values.\n\n```js\nvar age = compute(6,function(newVal, oldVal){\n\tif(!isNaN(+newVal)){\n\t\treturn +newVal;\n\t} else {\n\t\treturn oldVal;\n\t}\n});\n```\n\n","params":[{"types":[{"type":"*"}],"name":"initialValue","description":"\n\nThe initial value of the compute.\n"},{"types":[{"type":"function","returns":{"types":[{"type":"*"}]},"params":[{"types":[{"type":"*"}],"name":"newVal"},{"types":[{"type":"*"}],"name":"oldVal"}]}],"name":"setter","description":"\n\nA function that is called when a compute is called with an argument. The function is passed\nthe first argumented passed to [can-compute.computed] and the current value. If\n`set` returns a value, it is used to compare to the current value of the compute. Otherwise,\n`get` is called to get the current value of the compute and that value is used\nto determine if the compute has changed values.\n"}],"returns":{"types":[{"type":"can-compute.computed"}],"description":"A new compute.\n"}},{"code":"compute(object, propertyName [, eventName])","description":"\n\nCreate a compute from an object's property value. This short-cut\nsignature lets you create a compute on objects that have events\nthat can be listened to with [can-compute.computed.on].\n\n```js\nvar input = document.getElementById('age')\nvar age = compute(input,\"value\",\"change\");\n\nvar me = new DefineMap({name: \"Justin\"});\nvar name = compute(me,\"name\");\n```\n","params":[{"types":[{"type":"Object","options":[]}],"name":"object","description":"An object that has an `addEventListener` method and events dispatched on it.\n"},{"types":[{"type":"String"}],"name":"propertyName","description":"The property value to read on `object`. The\nproperty will be read via `object.attr(propertyName)` or `object[propertyName]`.\n"},{"types":[{"type":"String"}],"optional":true,"name":"eventName","defaultValue":"propertyName","description":"Specifies the event name to listen\nto on `object` for `propertyName` updates.\n"}],"returns":{"types":[{"type":"can-compute.computed"}],"description":"A new compute.\n\n"}}],"_curReturn":{"types":[{"type":"can-compute.computed"}],"description":"A new compute.\n\n"},"_curParam":{"types":[{"type":"String"}],"optional":true,"name":"eventName","defaultValue":"propertyName","description":"Specifies the event name to listen\nto on `object` for `propertyName` updates.\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>