built-in functions.
Clones the DOM node and renders a clone for each value in an array.
<ul>
<li fn="get:keywords each">{[.]}</li>
</ul>
<ul>
<li>javascript</li>
<li>browser</li>
</ul>
Where there are functions declared after each
in the attribute, they are run
on each clone.
Maps scope to an array of [key, value]
arrays.
<ul>
<li fn="get:repository entries each">{[0]}: {[1]}</li>
</ul>
<ul>
<li>type: git</li>
<li>url: https://github.com/cruncher/sparky.git</li>
</ul>
Fetches and parses a JSON file and uses it as scope to render the node.
<p fn="fetch:package.json">{[title]}!</p>
<p>Sparky!</p>
Maps scope to the value at path
of the current scope:
<a fn="get:repository" href="{[ url ]}">{[type|capitalise]} repository</a>
<a href="https://github.com/cruncher/sparky.git">Git repository</a>
Stops sparkifying the element. No more functions are run, and
the contents of the element are not parsed. Use stop
to ignore blocks of static HTML inside a Sparky template.
built-in pipes.
Returns true
where value is strictly equal to value
, otherwise false
.
Returns true
where value is an object with property
, otherwise false
.
Renders true
if value matches selector
. Behaviour is overloaded to accept
different types of selector
. Where selector
is a RegExp, value is assumed
to be a string and tested against it.
{[ .|matches:/abc/ ]} // `true` if value contains 'abc'
Where selector
is an Object, value is assumed to be an object and its
properties are matched against those of selector
.
{[ .|matches:{key: 3} ]} // `true` if value.key is `3`.
Renders the Class – the name of the constructor – of value.
Renders typeof
value.
Booleans
Where value is truthy renders a
, otherwise b
.
Numbers
Adds n
to value. Behaviour is overloaded to accept various types of ‘n’.
Where n
is a number, it is summed with value. So to add 1 to any value:
{[ number|add:1 ]}
Where ‘n’ is a duration string in date-like format, value is expected to be a
date and is advanced by the duration. So to advance a date by 18 months:
{[ date|add:'0000-18-00' ]}
Where ‘n’ is a duration string in time-like format, value is expected to be a
time and is advanced by the duration. So to put a time back by 1 hour and 20
seconds:
{[ time|add:'-01:00:20' ]}
Floors a number.
Returns the n
th root of value.
Return a value in the nominal range 0-1
from a value between min
and
max
mapped to a curve
, which is one of linear
, quadratic
, exponential
.
Return a value in the range min
-max
of a value in the range 0
-1
,
reverse mapped to curve
, which is one of linear
, quadratic
, exponential
.
Transforms values in the nominal range 0-1
to dB scale, and, when used in
two-way binding, transforms them back a number in nominal range.
Transforms a polar coordinate array to cartesian coordinates.
Transforms a polar coordinate array to cartesian coordinates.
Transforms numbers to strings with n
decimal places. Used for
two-way binding, gaurantees numbers are set on scope.
Converts number to string representing number to precision n
.
Dates
Adds ISO formatted yyyy-mm-dd
to a date value, returning a new date.
Converts an ISO date string, a number (in seconds) or a Date object
to a string date formatted with the symbols:
- `'YYYY'` years
- `'YY'` 2-digit year
- `'MM'` month, 2-digit
- `'MMM'` month, 3-letter
- `'MMMM'` month, full name
- `'D'` day of week
- `'DD'` day of week, two-digit
- `'ddd'` weekday, 3-letter
- `'dddd'` weekday, full name
- `'hh'` hours
- `'mm'` minutes
- `'ss'` seconds
- `'sss'` seconds with decimals
Times
Adds duration
, an ISO-like time string, to a time value, and
returns a number in seconds.
Add 12 hours:
```html
{[ time|add:'12:00' ]}
```
Durations may be negative. Subtract an hour and a half:
```html
{[ time|add:'-01:30' ]}
```
Numbers in a `duration` string are not limited by the cycles of the clock.
Add 212 seconds:
```html
{[ time|add:'00:00:212' ]}
```
Use `timeformat` to transform the result to a readable format:
```html
{[ time|add:'12:00'|timeformat:'h hours, mm minutes' ]}
```
Not that `duration` must be quoted because it contains ':' characters.
May be used for two-way binding.
Formats value, which must be an ISO time string or a number in seconds, to
match format
, a string that may contain the tokens:
- `'±'` Sign, renders '-' if time is negative, otherwise nothing
- `'Y'` Years, approx.
- `'M'` Months, approx.
- `'MM'` Months, remainder from years (max 12), approx.
- `'w'` Weeks
- `'ww'` Weeks, remainder from months (max 4)
- `'d'` Days
- `'dd'` Days, remainder from weeks (max 7)
- `'h'` Hours
- `'hh'` Hours, remainder from days (max 24), 2-digit format
- `'m'` Minutes
- `'mm'` Minutes, remainder from hours (max 60), 2-digit format
- `'s'` Seconds
- `'ss'` Seconds, remainder from minutes (max 60), 2-digit format
- `'sss'` Seconds, remainder from minutes (max 60), fractional
- `'ms'` Milliseconds, remainder from seconds (max 1000), 3-digit format
```html
{[ .|timeformat:'±hh:mm' ]}
-13:57
```
Type converters
Transforms booleans to strings and vice versa. May by used for two-way binding.
Transforms numbers to float strings, and, used for two-way binding,
gaurantees numbers are set on scope.
Transforms an array of numbers to a string using separator
, and,
used for two-way binding, gaurantees an array of numbers is set on scope.
Transforms numbers to integer strings, and, used for two-way binding,
gaurantees integer numbers are set on scope.
Transforms an array of numbers to a string of integers seperated with
separator
, and, used for two-way binding, gaurantees an array of integer
numbers is set on scope.
Transforms strings to numbers, and, used for two-way binding,
gaurantees float strings are set on scope.
Transforms strings to integer numbers, and, used for two-way binding,
gaurantees integer strings are set on scope.
Transforms objects to json, and used in two-way binding, sets parsed
objects on scope.
Strings
Returns value + string
.
Returns string
+ value.
Prepends value with string
until the output is n
characters long.
Appends value with string
until the output is n
characters long.
Returns the slug of value.
Returns true
if value is contained in array
, otherwise false
.
```html
{[ path|is-in:[0,1] ]}
```
Localises a number to n
digits.
Returns the lowercase string of value.
Where value is singular in a given lang
, retuns str1
, otherwise str2
.