Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
If the example doesn't seem obvious, the following prerequisite reads are recommended:
The following is a code example of how to teach Aurelia to work seamlessly with Ionic Framework:
Inside startup of application add IonicFramework before the standard configuration usually main.ts
Ordering matters when registering conventionally. Please look at the FAST Integration for a more verbose way where order does not matter.
If the example doesn't seem obvious, the following prerequisite reads are recommended:
The following is a code example of how to teach Aurelia to work seamlessly with Microsoft FAST:
The basics of integrating web component libraries with Aurelia.
Here's what you'll learn...
How to integrate with Microsoft FAST web components.
How to integrate with Ionic web components.
And more to be updated...
The guide for the integration here
The guide for the integration here
For our community
It is difficult for the core team members to try and test and document all possible integrations with web component frameworks/libraries. It is helpful that everyone in our community could lend a hand building the examples together, starting with the library choice of yours.
As ResizeObserver
is still new and experimental API, it's not widely supported in all browsers. Fortunately there are a few polyfills available. For example:
older spec, with only contentRect
: https://github.com/que-etc/resize-observer-polyfill
newer spec, with supports for box model options: https://github.com/juggle/resize-observer
To make the attribute work seamlessly with any polyfill users want to choose, we can adjust the way we get the ResizeObserver
constructor, as shown in the following example:
And now, our user can switch to any polyfill as the following example:
For the above implementation, the usage would be:
For the polyfill at https://github.com/que-etc/resize-observer-polyfill , you cannot use box-model
for observation option, as it follows an older spec of ResizeObserver
. Though it is a mature polyfill, and works well so if you want to use it, slightly modify the above implementation:
A picture is worth a thousand words and a code snippet is worth a thousand hours. If you're looking to learn parts of Aurelia by reference using code examples, you are in the right place.
Each section in the playground has been dedicated to a different component of Aurelia. The basics of templating and plugins are covered. However, for proper documentation on numerous aspects of Aurelia, please consult the relevant sections.
You will only find code examples in the playground, not explanations.
Aurelia provides a repeat.for
attribute that allows you to loop over data inside of your views. Think of repeat.for
as the equivalent of a traditional for loop in Javascript. Common scenarios might include loop over an array of products for an online store or options for a select dropdown.
You will find numerous working code examples below showcasing how you can work with collections of data in Aurelia.
In the following example, we loop over an array inside of our view model called items
and display the values in an unordered list. Notice how we use repeat.for
on our list item? This tells Aurelia that for every value it finds, populate item
with its value.
This type of functionality is convenient for situations where you want to display simple string values or populate select dropdowns where you only need the display value.
More commonly when working with an array of data, you will be working with an array of objects. You still loop over the array as we did in the previous example, however, we treat the populated item
variable as an object, referencing the property names in view.
Sometimes you might want to display a list of values in successive order, a range of numbers of 1 to 10. The repeater allows you to do this with ease. In the following example, there is nothing defined inside of the view model, just the view. All we did was write repeat.for="i of 10"
and then displayed the value, counting it down with each iteration.
Aurelia's expression parser implements a subset of ECMAScript Expressions. For the features that are supported, you can typically expect the JavaScript in your view to work the same way as it would in your view model, or in the browser console. In addition, there are two adjustments:
The Ampersand &
represents a BindingBehavior
(instead of Bitwise AND)
The Bar |
represents a ValueConverter
(instead of a Bitwise OR)
Non-expression syntax (statements, declarations, function and class definitions) is not supported.
As an overview of various expressions that are possible, the following list is for illustrative purposes and not exhaustive (and not necessarily recommended, either), but should give you a fairly good idea of what you can do.
foo
- The foo
variable in the current view-model
ßɑṙ
- The ßɑṙ
variable in the current view-model
Info
non-ASCII characters in the Latin script are supported. This script contains 1,350 characters covering the vast majority of languages. Other Non-BMP characters / Surrogate Pairs are not supported.
$this
- The current view-model
$parent
- The parent view-model
true
- The literal value true
false
- The literal value false
null
- The literal value null
undefined
- The literal value undefined
'foo'
or "foo"
- The literal string foo
'\n'
- The literal string [NEWLINE]
'\t'
- The literal string [TAB]
'\''
- The literal string '
'\\'
- The literal string \
'\\n'
- The literal string
'\u0061'
- The literal string a
Warning
Unsupported string literals include '\x61'
(2-point hex escape), '\u{61}'
or '\u{000061}'
(n-point braced unicode escape), and Non-BMP characters and Surrogate Pairs.
`foo`
- Equivalent to 'foo'
`foo\${bar}baz\${qux}quux`
- Equivalent to 'foo'+bar+'baz'+qux+'quux'
42
- The literal number 42
42.
or 42.0
- The literal number 42.0
.42
or 0.42
- The literal number 0.42
42.3
- The literal number 42.3
10e3
or 10E3
- The literal number 1000
Warning
Unsupported numeric literals include 0b01
(binary integer literal), 0o07
(octal integer literal), and 0x0F
(hex integer literal).
[]
- An empty array
[1,2,3]
- An array containing the literal numbers 1
, 2
and 3
[foo, bar]
- An array containing the variables foo
and bar
[[]]
- An array containing an empty array
Warning
Unsupported array literals include [,]
- Elision
{}
- An empty object
{foo}
or {foo,bar}
- ES6 shorthand notation, equivalent to {'foo':foo}
or {'foo':foo,'bar':bar}
{42:42}
- Equivalent to {'42':42}
Warning
Unsupported object literals include {[foo]: bar}
or {['foo']: bar}
(computed property names).
foo
here represents any valid primary expression or unary expression.
+foo
or +1
- Equivalent to foo
or 1
(the +
unary operator is always ignored)
-foo
or -1
- Equivalent to 0-foo
or 0-1
!foo
- Negates foo
typeof foo
- Returns the primitive type name of foo
void foo
- Evaluates foo
and returns undefined
Warning
Unary increment (++foo
or foo++
), decrement (--foo
or foo--
), bitwise (~
), delete
, await
and yield
operators are not supported.
a
and b
here represent any valid primary, unary or binary expression.
a*b
or a/b
or a%b
- Multiplicative
a+b
or a-b
- Additive
a<b
or a>b
or a<=b
or a>=b
or a in b
or a instanceof b
- Relational
a==b
or a!=b
or a===b
or a!==b
- Equality
a&&b
- Logical AND
a||b
- Logical OR
Warning
Exponentiation (a**b
) and bitwise operators are not supported.
foo
etc here represent any valid primary, unary, binary or conditional expression.
foo ? bar : baz
foo ? bar : baz ? qux : quux
foo
here must be an assignable expression (a simple accessor, a member accessor or an indexed member accessor). bar
can any valid primary, unary, binary, conditional or assignment expression.
foo = bar
foo = bar = baz
Lambda expressions can be used to call methods like Array#filter
, Array#sort
, but can also be passed in as an argument to a method on your ViewModel or even invoked as an IIFE.
() => 42
x => x.name
(e.g. ${items.map(x => x.name).join(', ')}
)
(...args) => args.join(', ')
(a => b => c => a + b + c)(1)(2)(3)
(renders '6')
items.reduce((sum, x) => sum + x, 0)
Warning
Wrapping the expression body in braces ((a, b) => { ... }
) is not supported.
Default parameters ((a = 42) => ...
) are not supported.
Destructuring parameters (({a}) => ...
or ([a]) => ...
) is not supported.
Member expressions with special meaning in Aurelia:
$parent.foo
- Access the foo
variable in the parent view-model
$parent.$parent.foo
- Access the foo
variable in the parent's parent view-model
$this
- Access the current view-model (equivalent to simply this
inside the view-model if it's an ES class)
Normal member and call expressions:
foo
here represents any valid member, call, assignment, conditional, binary, unary or primary expression (provided the expression as a whole is also valid JavaScript).
foo.bar
- Member accessor
foo['bar']
- Keyed member accessor
foo()
- Function call
foo.bar()
- Member function call
foo['bar']()
- Keyed member function call
Tagged template literals:
foo
here should be a function that can be called. The string parts of the template are passed as an array to the first argument and the expression parts are passed as consecutive arguments.
foo`bar`
- Equivalent to foo(['bar'])
foo`bar\${baz}qux`
- Equivalent to foo(['bar','qux'], baz)
foo`bar\${baz}qux\${quux}corge`
- Equivalent to foo(['bar','qux','corge'],baz,quux)
foo`\${bar}\${baz}\${qux}`
- Equivalent to foo(['','','',''],bar,baz,qux)
These are not considered to be a part of normal expressions and must always come at the end of an expression (though multiple can be chained). Furthermore, BindingBehaviors must come after ValueConverters. (note: BindingBehavior and ValueConverter are abbreviated to BB and VC for readability)
Valid BB expressions:
foo & bar & baz
- Applies the BB bar
to the variable foo
, and then applies the BB baz
to the result of that.
foo & bar:'baz'
- Applies the BB bar
to the variable foo
, and passes the literal string 'baz'
as an argument to the BB
foo & bar:baz:qux
- Applies the BB bar
to the variable foo
, and passes the variables baz
and qux
as arguments to the BB
'foo' & bar
- Applies the BB bar
to the literal string 'foo'
Valid VC expressions (likewise):
foo | bar | baz
foo | bar:'baz'
foo | bar:baz:qux
'foo' | bar
Combined BB and VC expressions:
foo | bar & baz
foo | bar:42:43 & baz:'qux':'quux'
foo | bar | baz & qux & quux
Invalid combined BB and VC expressions (BB must come at the end):
foo & bar | baz
foo | bar & baz | qux