String Converters

Converters allow you to change how data is displayed. They let you display the value of any model variable in a different format than it is stored in the model -- converting the output value from one format to another.

There are two ways to specify conversion or formatting for the display output of a particular model variable:

• Use the | (pipe) character within the value of any data-f- attribute. Converters are chainable, so you can apply several in a row to a particular variable.
• Add the attribute data-f-convert to any element to convert all of the model variables referenced within that element's scope.

For model variables that are strings (or that have been converted to strings), there are several special string formats you can apply.

Methods

s

Convert the model variable to a string. Often used for chaining to another converter.

Example

 <div>
     This year you are in charge of sales for
     <span data-f-bind="salesMgr.region | s | upperCase"></span>.
 </div>

Parameters

• val: Array The model variable.

Return Value

• String: converted string

upperCase

Convert the model variable to UPPER CASE.

Example

 <div>
     This year you are in charge of sales for
     <span data-f-bind="salesMgr.region | s | upperCase"></span>.
 </div>

Parameters

• val: Array The model variable.

Return Value

• String: converted string

lowerCase

Convert the model variable to lower case.

Example

 <div>
     Enter your user name:
     <input data-f-bind="userName | lowerCase"></input>.
 </div>

Parameters

• val: Array The model variable.

Return Value

• String: converted string

titleCase

Convert the model variable to Title Case.

Example

 <div>
     Congratulations on your promotion!
     Your new title is: <span data-f-bind="currentRole | titleCase"></span>.
 </div>

Parameters

• val: Array The model variable.

Return Value

• String: converted string