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:
IMPORTANT: There's no guarantee that a specific
propertychange
occurs before another one.
Thus, do not rely on bindings' alignment nor on an ideal state of synchronized properties for the same webcomponent while properties are changing.
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' -->
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.