can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - index-to-selected</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="current parent expanded"> <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=" "> <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.index-to-selected.html">index-to-selected</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>index-to-selected</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 binds to a <code><select></code> value in order to two-way bind a selected item from a list using the index as the key.</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/index-to-selected.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>index-to-selected(~item, list)</code> </h2> <p>When the getter is called, returns the index of the passed in item (which should be a <a href="can-compute.html" title="Create an observable value.">can-compute</a> from the provided list.</p> <p>When the setter is called, takes the selected index value and finds the item from the list with that index and passes that to set the compute's value.</p> <pre><code class="language-handlebars"><select {($value)}="index-to-selected(~person, people)"> {{#each people}} <option value="{{%index}}">{{name}}</option> {{/each}} </select> </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>item</b> <code>{<a href="can-compute.html" title="Create an observable value.">can-compute</a>}</code>: <p>A compute whose item is in the list.</p> </li> <li><b>list</b> <code>{<a href="can-define/list/list.html" title="Create observable lists.">can-define/list/list</a>|<a href="can-list.html" title="">can-list</a>|Array}</code>: <p>A list used to find the <code>item</code>.</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 to the select's value.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p>This will most often be used in conjunction with a <code><select></code> element and a bunch of options.</p> <p>The provided <code>item</code> <strong>must</strong> be a <a href="can-compute.html" title="Create an observable value.">can-compute</a> so that its value can be set when the user selects own of the dropdown options.</p> <p>You <strong>must</strong> use the indexes from the list as your <code><option></code> values. This is how it looks up items in the list both in the getter and the setter.</p> <div class='demo_wrapper' data-demo-src='demos/can-stache-converters/index-to-selected.html'></div> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-stache-converters/docs/index-to-selected.md"},"description":"A [can-stache.registerConverter 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. \n","title":"index-to-selected","name":"can-stache-converters.index-to-selected","type":"function","parent":"can-stache-converters.converters","signatures":[{"code":"index-to-selected(~item, list)","description":"\n\nWhen the getter is called, returns the index of the passed in item (which should be a [can-compute] from the provided list.\n\nWhen the setter is called, takes the selected index value and finds the item from the list with that index and passes that to set the compute's value.\n\n```handlebars\n<select {($value)}=\"index-to-selected(~person, people)\">\n\n\t{{#each people}}\n\n\t\t<option value=\"{{%index}}\">{{name}}</option>\n\n\t{{/each}}\n\n</select>\n```\n","params":[{"types":[{"type":"can-compute"}],"name":"item","description":"A compute whose item is in the list."},{"types":[{"type":"can-define/list/list"},{"type":"can-list"},{"type":"Array","options":[]}],"name":"list","description":"A list used to find the `item`."}],"returns":{"types":[{"type":"can-compute"}],"description":"A compute that will be two-way bound to the select's value.\n"}}],"_curParam":{"types":[{"type":"can-define/list/list"},{"type":"can-list"},{"type":"Array","options":[]}],"name":"list","description":"A list used to find the `item`."},"_curReturn":{"types":[{"type":"can-compute"}],"description":"A compute that will be two-way bound to the select's value.\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>