can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - not</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=" parent expanded"> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> <ul> <li class=" "> <a class="module" href="can-construct-super.html" title="can.Construct.super is a plugin that makes it easier to call base functions from inside inheriting functions."> can-construct-super </a> </li> <li class=" "> <a class="module" href="can-define-stream.html" title="Define property values using streams. can-stream is used internally to provide the stream functionality."> can-define-stream </a> </li> <li class=" "> <a class="module" href="can-fixture.html" title="can-fixture intercepts an AJAX request and simulates the response with a file or function."> can-fixture </a> </li> <li class=" "> <a class="module" href="can-fixture-socket.html" title="Simulate socket.io services."> can-fixture-socket </a> </li> <li class=" "> <a class="module" href="can-jquery.html" title="Extensions to the event system so that can events and jQuery events are cross-bound. Importing can-jquery will return the jQuery object and wire up the event system. var $ = require("can-jquery"); var div = $("<div>"); div.on("inserted", function(){ // it inserted! }); $("body").append(div);"> can-jquery </a> </li> <li class=" parent expanded"> <a class="module" href="can-stache-converters.html" title="Provides a set of converters useful for two-way binding with form elements such as <input> and <select>."> can-stache-converters </a> <ul> <li> <span>Pages</span> <ul> <li class=" "> <a class="function" href="can-stache-converters.pages-select-multiple.html" title="Cross bind a value to a <select> element with multiple selections permitted."> select[multiple] </a> </li> <li class=" "> <a class="page" href="can-stache-converters.pages.input-checkbox.html" title="Cross bind a value to a checkbox."> input[type=checkbox] </a> </li> <li class=" "> <a class="page" href="can-stache-converters.pages.input-radio.html" title="Cross bind a value to a radio input."> input[type=radio] </a> </li> <li class=" "> <a class="function" href="can-stache-converters.pages.select.html" title="Cross bind a value to a <select> element."> select </a> </li> </ul> </li> <li> <span>Converters</span> <ul> <li class=" "> <a class="function" href="can-stache-converters.boolean-to-inList.html" title="A converter that binds a boolean attribute, such as an <input> value to whether or not an item is in a list."> boolean-to-inList </a> </li> <li class=" "> <a class="function" href="can-stache-converters.either-or.html" title="a converter that two-way binds to a checkbox two values provided as arguments. This converter is useful when you have a binary decision that your user will implicitly understand."> either-or </a> </li> <li class=" "> <a class="function" href="can-stache-converters.equal.html" title="A converter that is usually for binding to a <input type="radio"> group, so that a scope value can be set the radio group's selected value."> equal </a> </li> <li class=" "> <a class="function" href="can-stache-converters.index-to-selected.html" title="A converter that binds to a <select> value in order to two-way bind a selected item from a list using the index as the key."> index-to-selected </a> </li> <li class="current parent expanded"> <a class="function" href="can-stache-converters.not.html" title="A converter that two-way binds the negation of a value."> not </a> </li> <li class=" "> <a class="function" href="can-stache-converters.string-to-any.html" title="A converter that binds a value to a primitive value, two way converted back to that primitive value when the attribute changes."> string-to-any </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="can-stream.html" title="Convert observable values into streams. Kefir is used internally to provide the stream functionality."> can-stream </a> </li> <li class=" "> <a class="module" href="can-vdom.html" title="A browser-lite environment for Node.js or a worker thread."> can-vdom </a> </li> <li class=" "> <a class="module" href="can-view-import.html" title=""> can-view-import </a> </li> <li class=" "> <a class="module" href="can-zone.html" title=""> can-zone </a> </li> <li class=" "> <a class="module" href="steal-stache.html" title="A StealJS extension that allows stache templates as dependencies."> steal-stache </a> </li> </ul> </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-ecosystem.html">Ecosystem</a></li> / <li><a href="can-stache-converters.html">can-stache-converters</a></li> / <li><a href="can-stache-converters.not.html">not</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>not</h1> <div>function</div> </div> <section class="description"> <p>A <a href="can-stache.registerConverter.html" title="Register a helper for bidirectional value conversion.">converter</a> that two-way binds the negation of a value.</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-stache-converters/tree/v3.0.3/docs/not.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>not(~value)</code> </h2> <p>When the getter is called, gets the value of the compute and returns the negation.</p> <p>When the setter is called, sets the compute's value to the negation of the new value derived from the element.</p> <p><em>Note</em> that <code>not</code> needs a compute so that it can update the scope's value when the setter is called.</p> <pre><code class="language-handlebars"><input type="checkbox" {($checked)}="not(~val)" /> </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>value</b> <code>{<a href="can-compute.html" title="Create an observable value.">can-compute</a>}</code>: <p>A value stored in a <a href="can-compute.html" title="Create an observable value.">can-compute</a>.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="can-compute.html" title="Create an observable value.">can-compute</a>}</code>: <p>A compute that will be two-way bound by <a href="can-stache-bindings.html" title="Provides template event, one-way, and two-way bindings.">can-stache-bindings</a> as a getter/setter on the element.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p>Use this converter to two-way bind to the negation of some value. For example:</p> <pre><code class="language-handlebars"><input type="checkbox" {($checked)}="not(~val)" /> </code></pre> <pre><code class="language-js">var map = new DefineMap({ val: true }); document.body.appendChild(template(map)); var input = document.querySelector('input'); input.checked; // -> false map.val = false; input.checked; // -> true // Now if you click the checkbox map.val === true; // because the checkbox is now false. </code></pre> <h3>Combined with other converters</h3> <p><code>not()</code> can be useful when used in combination with other converters that deal with boolean conversion. <a href="can-stache-converters.boolean-to-inList.html" title="A converter that binds a boolean attribute, such as an <input> value to whether or not an item is in a list.">boolean-to-inList</a> determines if an item is in a list. Here we wrap <code>not()</code> around this conversion so that the inverse is what is saved in the map's value:</p> <pre><code class="language-handlebars"><input type="checkbox" {($checked)}="not(~boolean-to-inList(item, list))" /> </code></pre> <pre><code class="language-js">var map = new DefineMap({ item: 2, list: new DefineList([ 1, 2, 3 ]) }); document.body.appendChild(template(map)); var input = document.querySelector('input'); input.checked; // -> false // Set `item` to a value not in the list map.item = 4; input.checked; // -> true // Check the input, whick will set it's value to `false` // This will be converted to `true` by not() and pushed into the list map.list.indexOf(4); // -> 3 // Remove it from the list, which will be converted to true by not() map.list.splice(3, 1); input.checked; // -> true </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-stache-converters/docs/not.md"},"description":"A [can-stache.registerConverter converter] that two-way binds the negation of a value. \n","title":"not","name":"can-stache-converters.not","type":"function","parent":"can-stache-converters.converters","signatures":[{"code":"not(~value)","description":"\n\nWhen the getter is called, gets the value of the compute and returns the negation.\n\nWhen the setter is called, sets the compute's value to the negation of the new value derived from the element.\n\n*Note* that `not` needs a compute so that it can update the scope's value when the setter is called.\n\n```handlebars\n<input type=\"checkbox\" {($checked)}=\"not(~val)\" />\n```\n","params":[{"types":[{"type":"can-compute"}],"name":"value","description":"A value stored in a [can-compute]."}],"returns":{"types":[{"type":"can-compute"}],"description":"A compute that will be two-way bound by [can-stache-bindings] as a getter/setter on the element.\n"}}],"_curParam":{"types":[{"type":"can-compute"}],"name":"value","description":"A value stored in a [can-compute]."},"_curReturn":{"types":[{"type":"can-compute"}],"description":"A compute that will be two-way bound by [can-stache-bindings] as a getter/setter on the element.\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>