DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
        • Examples
          • input[type=checkbox]
          • input[type=radio]
          • select
          • select[multiple]
        • Converters
          • boolean-to-inList
          • either-or
          • equal
          • index-to-selected
          • not
          • selected-to-index
          • string-to-any
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-namespace
      • can-reflect
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

string-to-any

  • Edit on GitHub

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(~item)

When the getter is called, gets the value of the compute and calls .toString() on that value.

When the setter is called, takes the new value and converts it to the primitive value using string-to-any and sets the compute using that converted value.

<select value:bind="string-to-any(~favePlayer)">
  <option value="23">Michael Jordan</option>
    <option value="32">Magic Johnson</option>
</select>

Parameters

  1. item {can-compute}:

    A compute holding a primitive value.

Returns

{can-compute}:

A compute that will be used by can-stache-bindings as a getter/setter when the element’s value changes.

Use

This is usually used with <select>s where you would like to two-way bind a string to a primitive value.

<select value:bind="string-to-any(~someValue)">
  <option value="2">Number</option>
  <option value="null">Null</option>
  <option value="foo">String</option>
  <option value="true">Boolean</option>
  <option value="NaN">NaN</option>
  <option value="Infinity">Infinity</option>
</select>
var str = document.getElementById('select-template').innerHTML;
var template = stache(str);

var map = new DefineMap({
    someValue: "foo"
});

document.body.appendChild(template(map));

map.item = NaN; // select.value becomes "NaN"

// Click the select box and choose Boolean
map.item === true; // -> true

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 3.14.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news