Prev Home Next

16 Use converters for custom encoding, data formatting, localization, etc.

Converter in tags - not linked:
{{convert:dataPath}}
DataDayOff
Convert and convertBack converters with data linking:
data-link="{convert:dataPath:convertBack}"
DataDayOffChoose day off
To edit, enter part of the name, or the number, or click here:

HTML:

    <!-- RENDERING with tags -->
    <!-- data value, no converter: -->
    <td>{{:dayOff}}</td>

    <!-- render from data, convert to display name -->
    <td>{{intToDay:dayOff}}</td>


    <!-- DATA LINKING with data-link expressions -->
    <!-- link from data value, no converter -->
    <td data-link="dayOff" />

    <!-- link from data, converted to display name -->
    <td data-link="{intToDay:dayOff}" />

    <!-- two-way data linking with convert and convertBack between data format (integer) and display name (text) -->
    <!-- Also show data value as tooltip -->
    <td><input data-link="{intToDay:dayOff:dayToInt title{:dayOff}}" /></td>

Script:

// Data
var days = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ],

// Convert and ConvertBack
$.views.converters({
    dayToInt: function( val ) {
        ...
    },
    intToDay: function( val ) {
        ...
    }
});