Sometimes developers want to simulate the situation they have experienced in other frameworks in Aurelia, like Angular or Vue binding syntax. Aurelia provides an API that allows you to change how it interprets templating syntax and even emulate other framework syntax with ease.
What is attributePattern?
attributePattern decorator in the form of extensibility feature in Aurelia. With it, we can introduce our own syntax to Aurelia's binding engine.
foo@bar would give you the parts foo and bar, but if you omitted symbols, then it would give you the parts foo@ and bar.
This attribute should be on top of a class, and that class should have methods whose name matches the pattern property of each pattern you have passed to the attributePattern. Consider the following example:
We have defined the Angular two-way binding pattern, [(PART)], the symbols are [()] which behaves as a syntax sugar for us; the public method defined in the body of the class has the same name as the pattern defined.
This method also accepts three parameters, rawName, rawValue, and parts.
rawName: "[(value)]"
rawValue: "message"
parts: ["value"]
The ref binding command to create a reference to a DOM element. In Angular, this is possible with #. For instance, ref="uploadInput" has #uploadInput equivalent in Angular.
You define the pattern of your new syntax in terms of a very special keyword, PART. That's essentially the equivalent of this regex: (.+).
symbols
In symbols you put anything that should not be included in part extraction, anything that makes your syntax more readable but plays no role but separator e.g. in value.bind syntax, the symbols is . which sits there just in terms of more readability, and does not play a role in detecting parts of the syntax.
rawName
Left-side of assignment.
rawValue
Right-side of assignment.
parts
The values of PARTs of your pattern without symbols.