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:

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