Filters

Usage

You can filter values inside template using filters. To use filter for expression, add vertical line filter after object field and filter name inside expression:

<script type="template/karkas" name="demo">
    <div class="item">
        <b>{{name}}</b>: <span>{{price|currency}}
    </div>
</script>

Some filters can have additional arguments, for example - currency filter has currency symbol as optional argument:

{{price|currency:"€"}}

Syntax: {{value|filterName:argument1,argument2}}

All arguments have come after filter name, and separated by coma. Expression must not include space or tabs symbols. Only scalar types, strings and booleans are acceptable as filter arguments.

Embedded filters

template

Compile object or array to HTML template.

Value type: Array|Object;

Arguments

• String templateName required - Template name;

json

Stringify object to JSON expression.

Value type: Object;

capitalize

Capitalize string

Value type: String;

currency

Convert number to currency expresssion (ex. 2.5 => "$ 2.50").

Value type: Number;

Arguments

• String currencySymbol optional - Currency symbol;

string

Apply a method from String class to value.

Value type: Any, except Object;

Arguments

• String method required - String method;

Note: Filter can use more than one argument, according to called function. Example:

              <!-- display string length -->
              {{title|string:"length"}}

              <!-- substring first 15 chars -->
              {{text|string:"substring",0,15}}
              

math

Call methods from Math JavaScript namespace.

Value type: Number

Arguments

• String method required - method name;

Note: Filter can use more than one argument, according to called function.

Custom filters

Filter is a regular pure function that receives current Karkas instance as `this` (context), value and parameters and returns a new processed value.

Example:

karkas.addFilter('makeBold', function(value, params) {
  console.log(this.filters); // Prints a list of Karkas filters
  return `<b>${value}</b>`;
});