Array 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.

In general, if the model variable is an array, the converter is applied to each element of the array. There are a few built in array converters which, rather than converting all elements of an array, select particular elements from within the array or otherwise treat array variables specially.

Methods

list

Convert the input into an array. Concatenates all elements of the input.

Parameters

• val: Array The array model variable.

last

Select only the last element of the array.

Example

 <div>
     In the current year, we have <span data-f-bind="Sales | last"></span> in sales.
 </div>

Parameters

• val: Array The array model variable.

reverse

Reverse the array.

Example

 <p>Show the history of our sales, starting with the last (most recent):</p>
 <ul data-f-foreach="Sales | reverse">
     <li></li>
 </ul>

Parameters

• val: Array The array model variable.

first

Select only the first element of the array.

Example

 <div>
     Our initial investment was <span data-f-bind="Capital | first"></span>.
 </div>

Parameters

• val: Array The array model variable.

previous

Select only the previous (second to last) element of the array.

Example

 <div>
     Last year we had <span data-f-bind="Sales | previous"></span> in sales.
 </div>

Parameters

• val: Array The array model variable.