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:

Example:

Other Bindings

Bindings might also want to refer to:

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