Often when you retrieve a value from somewhere, you want to transform it in some way. For this purpose, Jitsu allows you to define a converter on any expression part. Converters provide a flexible way to do this transformation using simple javascript expressions.

Above, you'll see several examples of converters.

The basic form for specifying options is:

        #[partType](path, option1:expr1, option2:expr2...)
    

For example, here's a binding using the convert option to convert the raw value into something suitable for display:

    <j:Label text="#bind(item.age, convert:(val + ' years'))">
    

This takes the item's age property (a number) and converts it into a string like "12 years".

The val variable name is special within a convert expression - it represents the value that needs to be converted.

Binding to arbitrary attributes

You can use bindings on any attribute and in elements, (not just on the special text attribute of a TextBox or Label). For example, you can do::

        <div style="#bind(item.firstName, 
               convert:(val  == 'Joe' ? 'color:red' : 'color:blue')">
    

Calling functions

You can use converters to do all sorts of conversions, e.g. if you had defined some functions to escape HTML markup

        function trim(str) {
            return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
        }
        
        function escapeHtml(str) {
            str = str.replace(/\</g, '&lt;');
            str = str.replace(/\>/g, '&gt;');
            str = str.replace(/\&/g, '&amp;');
            return str;
        }
    

You might use these in a binding like:

    <j:Label text="#bind(item.age, convert: (escapeHtml(trim(val))">
    

Using convertBack

The last binding example above also shows the convertBack option, which is used to convert values in the other direction - e.g. to take input from a text box and convert it back into the underlying value needed for an object.

    <j:TextBox text="#bind(item.age, 
              convert: (val * 12) + ' months', 
              convertBack: parseInt(val / 12))">