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:

• Only 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);
• Bindings are explicited with double handlebars {{...}} syntax;
• Bindings can be two-way directional, in that case they have the following form: {{ ..., twoway}};
• Available Scope is the whole DOM. Element references are resolved via 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.

Other Bindings

Bindings might also want to refer to:

• The element itself, then use {{ this.property }};
• A dynamic RepeaterItem inside a <pacem-repeater>, then use {{ ^item.property }} to access the current item properties, or {{ ^index }} for the current item index;
• Nested repeaters: to access upper level dynamic items just prepend more ^!

Example:

Transformers

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