DoneJS StealJS jQuery++ FuncUnit DocumentJS
5.33.3
6.0.0 4.3.0 3.14.1 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-bind
      • can-compute
      • can-debug
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-stache
        • Tags
          • {{expression}}
          • {{{expression}}}
          • {{#expression}}
          • {{/expression}}
          • {{else}}
          • {{<partialName}}
          • {{!expression}}
          • {{-expression-}}
        • Helpers
          • and
          • console
          • debugger
          • domData
          • eq
          • for(of)
          • portal
          • if
          • joinBase
          • let
          • not
          • or
          • switch
          • case
          • default
        • Expressions
          • Bracket Expression
          • Call Expression
          • Hash Expression
          • KeyLookup Expression
          • Literal Expression
        • Methods
          • addBindings
          • addConverter
          • addHelper
          • addLiveHelper
          • from
          • safeString
        • Key Operators
          • ~compute
          • ./current
          • ../parent
          • scope
          • scope/key
          • this
          • key
        • Pages
          • Expressions
          • Helpers
        • Types
          • getterSetter
          • helper
          • helperOptions
          • sectionRenderer
          • simpleHelper
          • view
        • Deprecated
          • Helper Expression
          • scope.vars
          • {{data name}}
          • {{#each(expression)}}
          • {{#is(expressions)}}
          • {{#unless(expression)}}
          • {{#with(expression)}}
          • registerConverter
          • registerHelper
          • registerPartial
          • Legacy Scope Behavior
          • {{^expression}}
          • {{>key}}
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-tag
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • 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

addConverter

  • Edit on GitHub

Register a helper for bidirectional value conversion.

stache.addConverter(converterName, getterSetter)

Creates a helper that can do two-way conversion between two values. This is especially useful with two-way bindings like:

<input value:bind='stringToNumber(age)'/>

A converter helper provides:

  • a get method that returns the value of the left value given the arguments passed on the right.
  • a set method that updates one or multiple of the right arguments computes given a new left value.

stringToNumber might convert a number (age) to a string (value), and the string (value) to a number (age) as follows:

import {stache, Reflect as canReflect, DefineMap} from "can";

stache.registerConverter( "stringToNumber", {
  get: function( numberObservable ) {
      return "" + canReflect.getValue(numberObservable);
  },
  set: function( string, numberObservable ) {
      canReflect.setValue(numberObservable, +string);
  }
} );

var data = new DefineMap({age: 36});
var frag = stache(`<input value:bind="age"/> Age: {{age}}`)(data);

document.body.append(frag);

Parameters

  1. converterName {String|Object}:

    The name of the converter helper or an object to register multiple converters at once.

  2. getterSetter {getterSetter}:

    An object containing get() and set() functions.

Use

NOTE: Before creating your own converter, you may want to look at what’s provided by can-stache-converters.

These helpers are useful for avoiding creating can-define/map/map getters and setters that do similar conversions on the view model. Instead, a converter can keep your viewModels more ignorant of the demands of the view. Especially as the view’s most common demand is that everything must be converted to a string.

That being said, the following is a richer example of a converter, but one that should probably be part of a view model.

<input value:bind='hoursAndMinutes(hours, minutes)'/>

The following converts both ways hours and minutes to value.

import {stache, DefineMap, queues, Reflect as canReflect} from "can";

stache.addConverter( "hoursAndMinutes", {
    get: function( hours, minutes ) {
        return ""+canReflect.getValue( hours ) +":"+ canReflect.getValue( minutes );
    },
    set: function( newFullName, hours, minutes ) {
        queues.batch.start();
        const parts = newFullName.split( ":" );
        canReflect.setValue( hours , +parts[0] );
        canReflect.setValue( minutes , +parts[1] );
        queues.batch.stop();
    }
} );

var data = new DefineMap({hours: 3, minutes: 17});
var frag = stache(`
    <input value:bind="hoursAndMinutes(hours, minutes)"/>
    Hours: {{hours}}, Minutes: {{minutes}}`
)(data);

document.body.append(frag);

It is possible to add multiple converters at once by passing an object instead of a string to the name argument:

import {stache, DefineMap, queues, Reflect as canReflect} from "can";

stache.addConverter({
    "numberToHex": {
        get: function(val) {
                return canReflect.getValue(val).toString(16);
        },
        set: function(val, valCompute) {
            return canReflect.setValue(valCompute, parseInt("0x" + val));
        }
    },
    "capitalize": {
        get: function(val){
            return canReflect.getValue(val).toString().toUpperCase();
        },
        set: function(val, valCompute) {
            return canReflect.setValue(valCompute, val.toLowerCase());
        }
    }
});

var data = new DefineMap({fname: "Cherif", age: 36});
var frag = stache(`
    <div>
        <input value:bind="capitalize(fname)"/>
        Firstname: {{fname}}
    </div>
    <div>
        <input value:bind="numberToHex(age)"/>
        Age: {{age}}
  </div>
 `
)(data);

document.body.append(frag);

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

On this page

Get help

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