loading... Pacem JS

Properties vs Attributes

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:


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.

Other Bindings

Bindings might also want to refer to:



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{

    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' -->