Boolean Conditional 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.

For a boolean conditional converter, the original format is your model variable, and the resulting "format" is a boolean value, or another value of your choosing.

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 example:

 <!-- displays "true" or "false" -->
 <!-- in particular, true if sampleVar is truthy (1, true, 'some string', [] etc.), 
       false if sampleVar is falsy (0, false, '') -->
 <span data-f-bind="sampleVar | toBool"></span>

Methods

toBool

Convert 'truthy' values to true and 'falsy' values to false.

Example

 <!-- displays "true" or "false" -->
 <!-- in particular, true if sampleVar is truthy (1, true, 'some string', [] etc.), 
       false if sampleVar is falsy (0, false, '') -->
 <span data-f-bind="sampleVar | toBool"></span>

Parameters

• value: Any

Return Value

• Boolean

ifTrue

Convert the input to a new value (for example, some text), based on whether it is true or false.

Example

 <div>
     <span data-f-bind="sampleVar | ifTrue('yes! please move forward', 'not ready to proceed')"></span> 
     <span data-f-bind="sampleVar | ifTrue('yes! please move forward')"></span>
 </div>

Parameters

• trueVal: String The value to display if the input is true. If there are commas in this argument, they must be escaped with \.

• falseVal: String (Optional) The value to display if the input is false. If not included, returns the input. If there are commas in this argument, they must be escaped with \.

• input: Any (Optional) The input to test. If not included, the output of the previous argument is used.

Return Value

• Any: If input is true, returns trueVal. If input is false, returns falseVal if provided, or echoes the input.

ifFalse

Convert the input to a new value (for example, some text), based on whether it is false or true.

Example

 <div>
     <span data-f-bind="sampleVar | ifFalse('not ready to proceed', 'actually this is still true')"></span> 
     <span data-f-bind="sampleVar | ifFalse('not ready to proceed')"></span>
 </div>

Parameters

• trueVal: String The value to display if the input is false. If there are commas in this argument, they must be escaped with \.

• falseVal: String (Optional) The value to display if the input is true. If not included, returns the input. If there are commas in this argument, they must be escaped with \.

• input: Any (Optional) The input to test. If not included, the output of the previous argument is used.

Return Value

• Any: If input is false, returns trueVal. If input is true, returns falseVal if provided, or echoes the input.