Based on CustomElements-v1,
Pacem JS identifies the observable attributes of its components via @Watch
decorators (ES2017 feature) on the corresponding properties, we'll return on that in a near future.
Observable attributes are evaluated the MVVM way in the declarative markup either as a static or dynamic outcome (binding). Bindings have their own peculiar syntax.
The syntax provided for bindings will likely change, but the current state of the art is the following:
Watched
properties are subject to binding;Watched
properties are evaluated against their attribute counterpart (properties are the camelCased version of the kebab-cased attributes, and viceversa);{{...}}
syntax;{{ ..., **twoway**}}
;id
attributes, prepending a #
(like in css selectors).Example:
Bindings might also want to refer to:
{{ this.property }}
;RepeaterItem
inside a <pacem-repeater>
, then use {{ ^item.property }}
to access the current item properties, or {{ ^index }}
for the current item index;^
!Example:
Complex binding logic can be injected using code shortcuts to backend functions.
@Transformer
decorators in TypeScript allow to exploit functions declaratively like this:
class Transformers{
@Transformer('funcX')
static addMethod(a: number, b: number): number{
return a + b;
}
}
<!-- $pacem object gathers all the declared transformers -->
<pacem-text text="{{ $pacem.funcX(12, 30) }}"></pacem-text>
<!-- text will yield '42' -->