GitHub
TwitterregisterConverter
Register a helper for bidirectional value conversion.
stache.registerConverter(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)}='numberToString(~age)'/>
A converter helper provides:
- a
getmethod that returns the value of theleftvalue given the arguments passed on theright. - a
setmethod that updates one or multiple of therightarguments computes given a newleftvalue.
numberToString might converts a number (age)
to a string (value), and the string (value) to a number (age)
as follows:
stache.registerConverter( "numberToString", {
get: function( fooCompute ) {
return "" + fooCompute();
},
set: function( newVal, fooCompute ) {
fooCompute( +newVal );
}
} );
Parameters
- converterName
{String}:The name of the converter helper.
- 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)}='fullName(~first, ~last)'/>
The following might converts both ways first and last to value.
import canBatch from "can-event/batch/batch";
stache.registerConverter( "fullName", {
get: function( first, last ) {
return first() + last();
},
set: function( newFullName, first, last ) {
canBatch.start();
const parts = newFullName.split( " " );
first( parts[ 0 ] );
last( parts[ 1 ] );
canBatch.stop();
}
} );