JsRender and JsViews: Use converters for custom encoding, data formatting, localization, etc.

Converter in tags - not linked:

{{convert:dataPath}}

Data	DayOff

Convert and convertBack converters with data linking:

data-link="{convert:dataPath:convertBack}"

Data	DayOff	Choose 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"></td>

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

    <!-- 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) {
        ...
    }
});